"use client";

import { useRouter } from "next/navigation";
import {
  getLanguageName,
  LOCALE_COOKIE,
  locales,
  type Locale,
} from "@/lib/i18n";

export default function LanguageSwitcher({
  locale,
  label,
  onChange,
}: {
  locale: Locale;
  label: string;
  onChange?: (locale: Locale) => void;
}) {
  const router = useRouter();

  function handleChange(value: Locale) {
    document.cookie = `${LOCALE_COOKIE}=${value}; Path=/; Max-Age=31536000; SameSite=Lax`;
    onChange?.(value);
    router.refresh();
  }

  return (
    <label className="flex h-10 items-center gap-2 text-sm">
      <span className="sr-only">{label}</span>
      <select
        value={locale}
        onChange={(event) => handleChange(event.target.value as Locale)}
        className="h-10 rounded-lg border border-slate-300 bg-white px-3 text-slate-700 outline-none focus:border-cyan-600 focus:ring-2 focus:ring-cyan-100"
        aria-label={label}
      >
        {locales.map((option) => (
          <option key={option} value={option}>
            {getLanguageName(option)}
          </option>
        ))}
      </select>
    </label>
  );
}