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

"use client";

import { useLocale } from "next-intl";
import { useRouter } from "next/navigation";
import { useTransition } from "react";

const LOCALES: { code: string; label: string }[] = [
  { code: "en", label: "EN" },
  { code: "it", label: "IT" },
];

/**
 * Locale picker. Writes the chosen locale to the `NEXT_LOCALE` cookie (read by
 * src/i18n/request.ts on the server) and refreshes the route so server
 * components re-render with the new messages. No URL change — matches the
 * cookie-based, routing-free i18n setup.
 */
export function LanguageSwitcher() {
  const locale = useLocale();
  const router = useRouter();
  const [pending, startTransition] = useTransition();

  function onChange(e: React.ChangeEvent<HTMLSelectElement>) {
    const next = e.target.value;
    document.cookie = `NEXT_LOCALE=${next};path=/;max-age=31536000;samesite=lax`;
    startTransition(() => router.refresh());
  }

  return (
    <select
      value={locale}
      onChange={onChange}
      disabled={pending}
      aria-label="Language"
      className="nav-item cursor-pointer bg-transparent text-[13px]"
      style={{ border: "none", padding: "0 0.25rem" }}
    >
      {LOCALES.map((l) => (
        <option key={l.code} value={l.code}>
          {l.label}
        </option>
      ))}
    </select>
  );
}