'use client';
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import i18nConfig from "../../i18n/next-i18next.config";
import { useAppStore } from "@/_stores/useAppStore";

export default function LangPicker() {
  const { i18n } = useTranslation("common");

  const { language, setLanguage } = useAppStore();

  const switchLanguage = (lng : string) => {
    setLanguage(lng);
    i18n.changeLanguage(lng);
  };

  useEffect(() => {
    if (language) {
      i18n.changeLanguage(language);
    }
  }, [language, i18n]);

  return (
    <div className="w-full flex justify-end p-4 space-x-1">
      {i18nConfig.i18n.locales.map((lng) => (
        <button
          key={lng}
          onClick={() => switchLanguage(lng)}
          className={`text-xs p-2 rounded shadow-md hover:bg-pink-500 hover:text-white ${language === lng ? "bg-pink-500 text-white font-bold" : "bg-white text-black"
            }`}
        >
          {lng.toUpperCase()}
        </button>
      ))}
    </div>
  );
}