"use client";

import { Languages } from "lucide-react";
import { usePathname } from "next/navigation";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
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 (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          type="button"
          variant="outline"
          size="icon"
          aria-label={`Locale: ${currentLocale.toUpperCase()}`}
        >
          <Languages className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="min-w-[8rem]">
        {locales.map((targetLocale) => (
          <DropdownMenuItem key={targetLocale} asChild>
            <a
              href={getLocalizedPath(targetLocale, currentPath)}
              className="flex items-center justify-between gap-4"
            >
              <span>{targetLocale.toUpperCase()}</span>
              {targetLocale === currentLocale ? (
                <span className="text-xs text-muted-foreground">Active</span>
              ) : null}
            </a>
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
