"use client";

import { Languages } from "lucide-react";
import { useLanguage, type Language } from "@/lib/i18n";
import { Button } from "@/components/ui/button";

export function LanguageSwitcher() {
  const { language, setLanguage, t } = useLanguage();

  const nextLanguage: Language = language === "en" ? "hi" : "en";

  return (
    <Button
      type="button"
      variant="outline"
      className="h-10 rounded-full border-[var(--theme-secondary)]/25 bg-white/80 px-3 text-sm font-bold text-foreground shadow-sm hover:text-[var(--theme-primary)]"
      onClick={() => setLanguage(nextLanguage)}
      aria-label={t("common.language")}
      title={t("common.language")}
    >
      <Languages className="h-4 w-4 text-[var(--theme-primary)]" />
      {language === "en" ? t("common.hindi") : t("common.english")}
    </Button>
  );
}