"use client";

import { usePathname } from "next/navigation";

import { Button } from "@/components/ui/button";
import { AppLocale, getLocalizedPath, stripLocalePrefix } from "@/lib/locale";

type LocaleToggleProps = {
  locale: string;
};

export function LocaleToggle({ locale }: LocaleToggleProps) {
  const pathname = usePathname();
  const locales: AppLocale[] = ["de", "en", "ar"];
  const currentPath = stripLocalePrefix(pathname);
  const currentLocale = (["de", "en", "ar"].includes(locale) ? locale : "de") as AppLocale;

  return (
    <div className="flex items-center gap-2">
      {locales.map((targetLocale) => (
        <Button
          key={targetLocale}
          asChild
          variant={targetLocale === currentLocale ? "secondary" : "outline"}
          size="sm"
          className="text-xs"
        >
          <a href={getLocalizedPath(targetLocale, currentPath)}>
            {targetLocale.toUpperCase()}
          </a>
        </Button>
      ))}
    </div>
  );
}