import { Globe } from "lucide-react";
import { useTranslation } from "react-i18next";

import { Button } from "@/components/ui/button";

export function LanguageToggle() {
  const { i18n, t } = useTranslation();
  const current = i18n.language === "fr" ? "fr" : "en";
  const next = current === "en" ? "fr" : "en";
  const nextLabel = t(next === "en" ? "language.english" : "language.french");

  return (
    <Button
      variant="secondary"
      size="sm"
      onClick={() => {
        i18n.changeLanguage(next).catch(() => undefined);
      }}
      aria-label={t("common.aria.language", { language: nextLabel })}
      className="h-9 px-3"
    >
      <span className="sr-only">{t("language.label")}</span>
      <Globe className="h-4 w-4" />
      <span className="ml-2 text-xs font-semibold uppercase text-muted-foreground">{current.toUpperCase()}</span>
    </Button>
  );
}
