"use client";

import { useLocale, useTranslations } from "next-intl";
import { usePathname, useRouter } from "@/i18n/navigation";
import { routing, type AppLocale } from "@/i18n/routing";
import { cn } from "@/lib/utils";

export function LanguageSwitcher() {
  const t = useTranslations("lang");
  const locale = useLocale() as AppLocale;
  const router = useRouter();
  const pathname = usePathname();

  return (
    <div
      className="inline-flex items-center gap-1 rounded-lg border border-[var(--line)] p-0.5"
      role="group"
      aria-label={t("label")}
    >
      {routing.locales.map((loc) => (
        <button
          key={loc}
          type="button"
          className={cn(
            "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
            loc === locale
              ? "bg-[rgba(240,197,10,0.18)] text-[var(--accent-hot)]"
              : "text-[var(--muted)] hover:text-[var(--ink)]"
          )}
          aria-pressed={loc === locale}
          onClick={() => router.replace(pathname, { locale: loc })}
        >
          {t(loc)}
        </button>
      ))}
    </div>
  );
}