import { languageMenu } from "@root/src/configure";
import useLocalStorage from "@root/src/hooks/useLocalStorage";
import { changeLanguage } from "i18next";
import { FiFlag } from "react-icons/fi";
import RoundButtonBase from "../atoms/RoundButtonBase";
import IconBase from "../molecules/IconBase";
import { useTranslation } from "react-i18next";

const LanguageButton = () => {
	const [, setLanguage] = useLocalStorage("language", "eng");
	const { t } = useTranslation();
	return (
		<div className="dropdown dropdown-left">
			<RoundButtonBase tooltipText={t("button.action.changeLanguage")}>
				<IconBase>
					<FiFlag />
				</IconBase>
			</RoundButtonBase>
			<ul className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
				{languageMenu
					.sort((a, b) => a.label.localeCompare(b.label))
					.map((language) => (
						<li
							key={language.label}
							onClick={() => {
								changeLanguage(language.lang);
								setLanguage(language.lang);
							}}
						>
							<button>
								{language.icon} {language.label}
							</button>
						</li>
					))}
			</ul>
		</div>
	);
};

export default LanguageButton;
