turkmen-textile-front/src/components/shared/lang-menu.tsx

import { FC, useState } from "react";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { cn } from "@/lib/utils";
import { Language, useLangStore } from "@/store/lang";

interface Props {
  className?: string;
  light?: boolean;
}

export const langs = [
  {
    lang: Language.RU,
  },
  {
    lang: Language.EN,
  },
  {
    lang: Language.TM,
  },
];

const flagMap: Record<string, string> = {
  [Language.RU]: "/ru.svg",
  [Language.EN]: "/english.svg",
  [Language.TM]: "/tm.png",
};

const labelMap: Record<string, string> = {
  [Language.RU]: "Ру",
  [Language.EN]: "En",
  [Language.TM]: "Tm",
};

const nameMap: Record<string, string> = {
  [Language.RU]: "Русский",
  [Language.EN]: "English",
  [Language.TM]: "Türkmen",
};

export const LangMenu: FC<Props> = ({ className, light = false }) => {
  const lang = useLangStore((state) => state.lang);
  const setLang = useLangStore((state) => state.setLang);

  const [isOpen, setIsOpen] = useState(false);

  return (
    <Popover open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
      <PopoverTrigger
        className={cn(
          "flex text-white items-center gap-2",
          light ? "text-white" : "text-black",
          className
        )}
      >
        <img src={flagMap[lang]} alt="" />
        {labelMap[lang]}
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M4.23021 8.01443C4.35919 7.70304 4.66305 7.5 5.00011 7.5H15.0001C15.3372 7.5 15.641 7.70304 15.77 8.01443C15.899 8.32583 15.8277 8.68426 15.5894 8.92259L10.5894 13.9226C10.2639 14.248 9.73629 14.248 9.41085 13.9226L4.41085 8.92259C4.17252 8.68426 4.10122 8.32583 4.23021 8.01443ZM7.01195 9.16667L10.0001 12.1548L12.9883 9.16667H7.01195Z"
            fill={light ? "#fff" : "#000"}
          />
        </svg>
      </PopoverTrigger>

      <PopoverContent className="flex flex-col gap-6 w-fit relative z-[200] py-2 px-4 bg-surface_container">
        {langs
          .filter((item) => item.lang !== lang)
          .map((item, i) => (
            <div
              onClick={() => {
                setLang(item.lang);
                setIsOpen(false);
              }}
              key={i}
              className="flex gap-3 py-2 items-center cursor-pointer"
            >
              <img
                src={flagMap[item.lang]}
                alt="flag"
              />
              <h5>{nameMap[item.lang]}</h5>
            </div>
          ))}
      </PopoverContent>
    </Popover>
  );
};