import { ChevronDown, Languages, MoveUpRight } from "lucide-react";
import { defaultLanguage } from "../const.mjs";
import { usePathname } from "@lazarv/react-server";
const langName = {
en: "English",
ja: "日本語",
};
export default function LanguageSwitch({ lang }) {
const pathname = usePathname();
return (
<div className="relative inline-flex items-center justify-center w-8 h-8 ml-2">
<div
htmlFor="dropdown"
className="cursor-pointer group flex items-center"
>
<Languages />
<ChevronDown className="size-3" />
<ul className="absolute left-0 top-8 -ml-2 bg-white border border-gray-300 dark:bg-gray-800 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 ease-in-out">
<li className="px-4 py-2 font-semibold ">{langName[lang]}</li>
{Object.entries(langName).reduce((children, [newLang, name]) => {
if (newLang !== lang) {
children.push(
<li key={newLang} className="px-4 py-2 ">
<a
href={`${newLang === defaultLanguage ? "/" : `/${newLang}`}${pathname.replace(new RegExp(`^/${lang}`), "")}`.replace(
/^\/+/,
"/"
)}
hrefLang={newLang}
className="flex gap-1 items-center text-sm text-nowrap"
>
{name} <MoveUpRight className="size-3 text-gray-500" />
</a>
</li>
);
}
return children;
}, [])}
</ul>
</div>
</div>
);
}