import { Languages } from "lucide-react";

import { Button } from "@/shared/ui/button";
import { useI18n } from "./I18nProvider";

export function LocaleToggle() {
  const { locale, setLocale, t } = useI18n();
  const nextLocale = locale === "zh-Hans" ? "en" : "zh-Hans";
  const label =
    nextLocale === "en"
      ? t("locale.switchToEnglish")
      : t("locale.switchToChinese");

  return (
    <Button
      aria-label={label}
      className="h-8 gap-1.5 border-black/10 bg-white/80 px-2.5 text-xs text-black shadow-sm backdrop-blur-sm hover:bg-white dark:border-white/10 dark:bg-black/70 dark:text-white dark:hover:bg-black"
      onClick={() => setLocale(nextLocale)}
      title={label}
      variant="outline"
    >
      <Languages aria-hidden="true" className="h-3.5 w-3.5" />
      {nextLocale === "en" ? "EN" : "中文"}
    </Button>
  );
}