components/footer/select-languages.tsx

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
import { useRef, useState } from "react";
import { useClickAway } from "react-use";
import router, { useRouter } from "next/router";

import FLAGS from "components/langs";
import classNames from "classnames";

export const SelectLanguages = () => {
  const { locale } = useRouter();

  const ref = useRef<HTMLDivElement>(null);
  const [open, setOpen] = useState(false);

  useClickAway(ref, () => setOpen(false));

  const country = FLAGS.find((flag) => flag.code === locale) ?? FLAGS[0];
  const SelectedCountry = country?.icon || (() => null);

  return (
    <div ref={ref} className="relative">
      <div
        className="flex items-center gap-2 text-dark-100 text-sm"
        onClick={() => setOpen(!open)}
      >
        <SelectedCountry />
        {country.name}
        <FontAwesomeIcon
          icon={faCaretDown}
          className="text-dark-100 transition-all duration-200 w-2 cursor-pointer"
        />
      </div>
      <div
        className={classNames(
          "bg-white z-10 rounded-lg shadow-xl p-2 absolute bottom-0 left-0 transform translate-x-10 translate-y-6 max-h-[250px] overflow-auto w-[200px] grid grid-cols-1",
          {
            "opacity-0 scale-75 pointer-events-none": !open,
          }
        )}
      >
        {FLAGS.map((lang) => {
          const Component = lang.icon;
          return (
            <div
              key={lang.code}
              className={classNames(
                "flex items-center gap-2.5 p-2 rounded-lg transition-all duration-200 hover:bg-dark-100 hover:bg-opacity-40 text-dark-200 font-medium text-sm cursor-pointer",
                {
                  "bg-blue !text-white hover:!bg-blue hover:bg-opacity-100":
                    lang.code === locale,
                }
              )}
              onClick={() => {
                // change locale of the app
                router.push(router.asPath, router.asPath, {
                  locale: lang.code,
                });
                setOpen(false);
              }}
            >
              <Component />
              {lang.name}
            </div>
          );
        })}
      </div>
    </div>
  );
};