1import {
 2    DropdownMenuSub,
 3    DropdownMenuSubContent,
 4    DropdownMenuItem,
 5    DropdownMenuSubTrigger,
 6    DropdownMenuPortal
 7} from "@marzneshin/components";
 8import { Languages } from "lucide-react";
 9import { FC } from "react";
10import { useTranslation } from "react-i18next";
11import { cn } from "@marzneshin/utils";
12
13const LanguageItem = ({ language, title }: { language: string, title: string }) => {
14    const { i18n } = useTranslation();
15
16    const changeLanguage = (lang: string) => {
17        i18n.changeLanguage(lang);
18    };
19    return (
20        <DropdownMenuItem
21            className={cn({ "bg-primary text-secondary": i18n.language === language })}
22            onClick={() => changeLanguage(language)}
23        >
24            {title}
25        </DropdownMenuItem>
26    );
27}
28
29export const LanguageSwitchMenu: FC = () => {
30    const { t } = useTranslation();
31
32    return (
33        <DropdownMenuSub>
34            <DropdownMenuSubTrigger arrowDir="left">
35                <div className="hstack items-center justify-end">
36                    <span className="mx-1">{t("language")}</span>
37                    <Languages className="size-[1rem]" />
38                </div>
39            </DropdownMenuSubTrigger>
40            <DropdownMenuPortal>
41                <DropdownMenuSubContent>
42                    <LanguageItem language="en" title="English" />
43                    <LanguageItem language="kmr" title="Kurdî Kurmancî" />
44                    <LanguageItem language="kur" title="Kurdî Soranî" />
45                    <LanguageItem language="ckb" title="کوردی سورانی" />
46                    <LanguageItem language="fa" title="فارسی" />
47                    <LanguageItem language="ru" title="Русский" />
48                </DropdownMenuSubContent>
49            </DropdownMenuPortal>
50        </DropdownMenuSub>
51    );
52};