"use client";
import { useRouter } from "next/navigation";
import { useTranslation } from "react-i18next";

export default function LanguageSwitcher() {
  const router = useRouter();
  const { i18n, t } = useTranslation();

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
    // Force a refresh to update all components with new language
    router.refresh();
  };

  return (
    <div className="flex space-x-2 items-center">
      <button 
        onClick={() => changeLanguage("en")}
        className={`px-2 py-1 rounded-md text-xs ${i18n.language === "en" ? "bg-primary text-white" : "bg-gray-100"}`}
      >
        {t("english", "English")}
      </button>
      <button 
        onClick={() => changeLanguage("es")}
        className={`px-2 py-1 rounded-md text-xs ${i18n.language === "es" ? "bg-primary text-white" : "bg-gray-100"}`}
      >
        {t("spanish", "Español")}
      </button>
      <button 
        onClick={() => changeLanguage("pt")}
        className={`px-2 py-1 rounded-md text-xs ${i18n.language === "pt" ? "bg-primary text-white" : "bg-gray-100"}`}
      >
        {t("portuguese", "Português")}
      </button>
    </div>
  );
}