Untitled

export function LanguageSelector({ isMobile, onClick }: LanguageSelectorProps) {
  const { header } = useShopStructure();
  const languageListAll = useHistoricalSetting(header?.languageList) as LanguageDto[];
  const languageList: LanguageDto[] = languageListAll.filter(x => x.allowInShop);
  const [showMenu, setShowMenu] = useState(false);
  const { selectedLanguage, setSelectedLanguage, setStaticText } = useLanguage();
  const menuRef = useClickAwayRef(() => setShowMenu(false));
  const selectedLanguageObject: LanguageDto = languageList.find(x => x.name === selectedLanguage);

  const changeLanguage = async (name, code) => {
    setSelectedLanguage({ name, code });
    setShowMenu(false);
    const fetchedStaticText = await fetcher<object>(buildEndpoint(Path.getTranslation(name)));
    setStaticText(fetchedStaticText);
  };

  if (isMobile) {
    return (
      <span>
        {languageList.map(({ label, name, code, img }) => (
          <Button
            key={label}
            className={tw({
              'mx-3 border-2 border-transparent px-0.5': true,
              '!border-[color:var(--primary)]': selectedLanguage && selectedLanguage === name,
            })}
            onClick={() => {
              changeLanguage(name, code);
              onClick();
            }}
          >
            <FlagIcon imgSrc={img} name={name} label={label} />
          </Button>
        ))}
      </span>
    );
  }

  const dropDownOpts = languageList.map(({ label, name, code, img }) => (
    <Button
      key={label}
      className={`${dropDownClasses} p-3 flex items-center justify-between hover:text-[color:var(--primary)]`}
      onClick={() => changeLanguage(name, code)}
    >
      <span className={tw('flex items-center')}>
        <FlagIcon imgSrc={img} name={name} label={label} className="mr-3" />
        <span>{label}</span>
      </span>
      {selectedLanguage && selectedLanguage === name ? (
        <Icon color={'var(--primary)'} className={tw('ml-3')} icon={faCheck} />
      ) : null}
    </Button>
  ));

  const menu = showMenu && (
    <div
      className={tw(
        'w-full md:w-fit text-center fixed lg:absolute right-0 top-[60px] lg:top-[70px]',
        'bg-[color:var(--white)] text-[color:var(--text-color)] drop-shadow-lg rounded',
        'z-10',
        'text-center',
      )}
    >
      {dropDownOpts}
    </div>
  );

  return (
    <span className={tw('m-auto hidden lg:inline-flex ml-5')} ref={menuRef}>
      <FlagIcon
        imgSrc={selectedLanguageObject.img}
        name={selectedLanguageObject.name}
        onClick={() => setShowMenu(!showMenu)}
        label={selectedLanguageObject.label}
      />
      {menu}
    </span>
  );
}