"use client";

import { useTranslations } from "next-intl";

import { LocaleToggle } from "@/components/layout/locale-toggle";
import { ThemeToggle } from "@/components/theme-toggle";
import { cn } from "@/lib/utils";

type FloatingPreferencesProps = {
  locale: string;
  className?: string;
};

export function FloatingPreferences({
  locale,
  className,
}: FloatingPreferencesProps) {
  const t = useTranslations("navigation");

  return (
    <div className={cn("fixed inset-x-0 top-0 z-50 px-4 pt-4 sm:px-6", className)}>
      <div className="mx-auto flex w-full max-w-max items-center justify-center gap-2">
        <ThemeToggle ariaLabel={t("themeToggle")} className="bg-background/90" />
        <LocaleToggle locale={locale} />
      </div>
    </div>
  );
}
