import { Switch } from "@xtablo/ui/components/switch";
import { useTranslation } from "react-i18next";

export function LanguageToggle() {
  const { i18n } = useTranslation();

  const toggleLanguage = () => {
    const newLanguage = i18n.language === "en" ? "fr" : "en";
    i18n.changeLanguage(newLanguage);
  };

  const isFrench = i18n.language === "fr";

  return (
    <div className="flex items-center gap-2">
      <span
        className={`text-lg transition-all ${!isFrench ? "opacity-100 scale-110" : "opacity-60 scale-100"}`}
      >
        🇬🇧
      </span>
      <Switch checked={isFrench} onCheckedChange={toggleLanguage} />
      <span
        className={`text-lg transition-all ${isFrench ? "opacity-100 scale-110" : "opacity-60 scale-100"}`}
      >
        🇫🇷
      </span>
    </div>
  );
}
