"use client";

import { useEffect, useState } from "react";
import { useLocale, useTranslations } from "next-intl";
import { usePathname, useRouter } from "@/i18n/navigation";
import { localeLabels, routing } from "@/i18n/routing";

export function LocaleSwitcher() {
  const locale = useLocale();
  const router = useRouter();
  const pathname = usePathname();
  const t = useTranslations("locale");
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return <span className="inline-block h-11 w-[9rem] rounded-full border border-line bg-card" />;
  }

  return (
    <label className="flex items-center gap-1 text-xs text-muted">
      <span className="sr-only">{t("label")}</span>
      <select
        className="max-w-[10.5rem] rounded-full border border-line bg-card px-2 py-2 text-sm"
        value={locale}
        onChange={(e) => router.replace(pathname, { locale: e.target.value })}
      >
        {routing.locales.map((item) => (
          <option key={item} value={item}>
            {localeLabels[item] ?? item}
          </option>
        ))}
      </select>
    </label>
  );
}