import { Link, useLocation } from "react-router-dom";
import { useLocale } from "@/i18n/LocaleContext";
import { switchLocalePath } from "@/i18n/routes";
import { cn } from "@/lib/utils";

interface Props {
  className?: string;
  variant?: "bar" | "inline";
}

export function LanguageToggle({ className, variant = "bar" }: Props) {
  const { locale } = useLocale();
  const location = useLocation();

  const items: Array<{ code: "fr" | "en"; label: string }> = [
    { code: "fr", label: "FR" },
    { code: "en", label: "EN" },
  ];

  return (
    <div className={cn("flex items-center gap-1 text-sm font-medium tracking-wide", className)}>
      {items.map((item, i) => {
        const active = item.code === locale;
        const target = switchLocalePath(location.pathname, item.code);
        return (
          <span key={item.code} className="flex items-center gap-1">
            {i > 0 && (
              <span
                aria-hidden
                className={cn(
                  "opacity-40",
                  variant === "bar" ? "text-bar-muted-foreground" : "text-muted-foreground",
                )}
              >
                |
              </span>
            )}
            <Link
              reloadDocument
              to={target}
              aria-current={active ? "true" : undefined}
              className={cn(
                "px-1 transition-colors",
                variant === "bar"
                  ? active
                    ? "text-bar-foreground"
                    : "text-bar-muted-foreground hover:text-bar-foreground"
                  : active
                  ? "text-foreground"
                  : "text-muted-foreground hover:text-foreground",
              )}
            >
              {item.label}
            </Link>
          </span>
        );
      })}
    </div>
  );
}