sass-mohfarawati/components/layout/floating-controls.tsx

"use client";

import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { ShieldCheck, SlidersHorizontal, X } from "lucide-react";
import { useTranslations } from "next-intl";
import { useState, type ReactNode } from "react";

import { LocaleToggle } from "@/components/layout/locale-toggle";
import { SoundToggle } from "@/components/sound-toggle";
import { ThemeToggle } from "@/components/theme-toggle";
import { buildAdminUrl } from "@/lib/admin-routing";
import type { AppLocale } from "@/lib/locale";
import { cn } from "@/lib/utils";

type FloatingControlsProps = {
  locale: string;
  defaultLocale: AppLocale;
  isSuperAdmin?: boolean;
};

const pill =
  "flex h-11 w-11 items-center justify-center rounded-full border border-border/60 bg-background/80 text-foreground/80 shadow-panel backdrop-blur-chrome transition-colors hover:bg-accent hover:text-foreground";

const itemVariants = {
  hidden: { opacity: 0, y: 12, scale: 0.8 },
  show: { opacity: 1, y: 0, scale: 1 },
};

export function FloatingControls({
  locale,
  defaultLocale,
  isSuperAdmin = false,
}: FloatingControlsProps) {
  const [open, setOpen] = useState(false);
  const t = useTranslations("navigation");
  const reducedMotion = useReducedMotion();

  const controls: ReactNode[] = [
    <SoundToggle
      key="sound"
      ariaLabel={t("soundMute")}
      mutedAriaLabel={t("soundUnmute")}
      variant="ghost"
      className={cn(pill, "border-transparent bg-transparent")}
    />,
    <ThemeToggle
      key="theme"
      ariaLabel={t("themeToggle")}
      variant="ghost"
      className={cn(pill, "border-transparent bg-transparent")}
    />,
    <LocaleToggle
      key="locale"
      locale={locale}
      defaultLocale={defaultLocale}
      className={cn(pill, "border-transparent bg-transparent p-0")}
    />,
  ];

  if (isSuperAdmin) {
    controls.push(
      <a key="admin" href={buildAdminUrl("/")} aria-label="Open admin dashboard" className={pill}>
        <ShieldCheck className="h-[1.125rem] w-[1.125rem]" />
      </a>,
    );
  }

  return (
    <div className="pointer-events-none fixed bottom-0 end-0 z-50 flex flex-col items-center gap-2 p-4"
      style={{ paddingBottom: "calc(1rem + env(safe-area-inset-bottom, 0px))" }}>
      <AnimatePresence>
        {open ? (
          <motion.div
            key="tray"
            className="pointer-events-auto flex flex-col items-center gap-2 rounded-full border border-border/50 bg-background/60 p-1.5 shadow-panel backdrop-blur-chrome"
            initial={reducedMotion ? { opacity: 0 } : "hidden"}
            animate={reducedMotion ? { opacity: 1 } : "show"}
            exit={reducedMotion ? { opacity: 0 } : "hidden"}
            variants={{
              hidden: { transition: { staggerChildren: 0.04, staggerDirection: -1 } },
              show: { transition: { staggerChildren: 0.05, delayChildren: 0.02 } },
            }}
          >
            {controls.map((control, index) => (
              <motion.div
                key={index}
                variants={reducedMotion ? undefined : itemVariants}
                transition={{ type: "spring", stiffness: 460, damping: 28 }}
              >
                {control}
              </motion.div>
            ))}
          </motion.div>
        ) : null}
      </AnimatePresence>

      <button
        type="button"
        onClick={() => setOpen((value) => !value)}
        aria-expanded={open}
        aria-label={open ? t("closeMenu") : t("openMenu")}
        className={cn(pill, "pointer-events-auto")}
      >
        <motion.span
          animate={{ rotate: open ? 90 : 0 }}
          transition={reducedMotion ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 24 }}
          className="flex items-center justify-center"
        >
          {open ? <X className="h-[1.125rem] w-[1.125rem]" /> : <SlidersHorizontal className="h-[1.125rem] w-[1.125rem]" />}
        </motion.span>
      </button>
    </div>
  );
}