EpicNext-Cms/src/components/language-switcher.tsx

"use client";

import Image from "next/image";
import { useLocale } from "next-intl";
import { useRouter } from "next/navigation";
import { useTransition, useState, useRef, useEffect } from "react";

const LOCALES: { code: string; label: string; lang: string }[] = [
  { code: "nl", label: "Nederlands", lang: "nl" },
  { code: "en", label: "English", lang: "en" },
  { code: "de", label: "Deutsch", lang: "de" },
  { code: "fr", label: "Français", lang: "fr" },
  { code: "es", label: "Español", lang: "es" },
  { code: "it", label: "Italiano", lang: "it" },
];

export function LanguageSwitcher() {
  const locale = useLocale();
  const router = useRouter();
  const [pending, startTransition] = useTransition();
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);
  const current = LOCALES.find((l) => l.code === locale) ?? LOCALES[0];

  useEffect(() => {
    function handleClick(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    }
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, []);

  function switchLocale(code: string) {
    if (code === locale) return;
    document.cookie = `NEXT_LOCALE=${code};path=/;max-age=31536000;samesite=lax;secure`;
    startTransition(() => router.refresh());
    setOpen(false);
  }

  return (
    <div className="relative" ref={ref}>
      <button
        type="button"
        onClick={() => setOpen(!open)}
        disabled={pending}
        className="nav-item flex items-center gap-1.5 bg-transparent text-[13px]"
        style={{ border: "none", cursor: "pointer", padding: "0 0.25rem" }}
      >
        <Image
          src={`/assets/images/icons/flags/${current.code}.png`}
          alt={current.lang}
          width={16}
          height={16}
          className="inline-block h-4 w-auto"
        />
        <span>{current.code.toUpperCase()}</span>
        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </button>

       {open && (
         <div
           className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[160px] rounded-xl z-50 py-2"
         >
           {LOCALES.map((l) => (

            <button
              key={l.code}
              type="button"
              onClick={() => switchLocale(l.code)}
              className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm font-medium transition-all duration-100 rounded-lg mx-1 ${
                l.code === locale ? "opacity-100" : "opacity-70 hover:opacity-100"
              }`}
              style={{
                color: "var(--color-text)",
                background: "none",
                border: "none",
                cursor: "pointer",
                width: "calc(100% - 8px)",
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.backgroundColor = "color-mix(in srgb, var(--color-primary) 10%, transparent)";
                e.currentTarget.style.color = "var(--color-primary)";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.backgroundColor = "transparent";
                e.currentTarget.style.color = "var(--color-text)";
              }}
            >
              <Image
                src={`/assets/images/icons/flags/${l.code}.png`}
                alt={l.lang}
                width={16}
                height={16}
                className="inline-block h-4 w-auto"
              />
              {l.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}