"use client";

import { useLocale } from "next-intl";
import { usePathname, useRouter } from "@/lib/i18n/navigation";
import { locales, localeNames, type Locale } from "@/lib/i18n/config";
import { cn } from "@/lib/utils";

export function LanguageSwitcher() {
  const locale = useLocale() as Locale;
  const pathname = usePathname();
  const router = useRouter();

  function switchLocale(next: Locale) {
    router.replace(pathname, { locale: next });
  }

  return (
    <div className="flex items-center gap-1 rounded-full border border-border bg-surface px-1 py-1">
      {locales.map((l) => (
        <button
          key={l}
          onClick={() => switchLocale(l)}
          className={cn(
            "rounded-full px-3 py-1 text-xs font-medium transition-all duration-200",
            locale === l
              ? "bg-accent text-background"
              : "text-text-secondary hover:text-text-primary"
          )}
        >
          {l === "fa" ? "فا" : "EN"}
        </button>
      ))}
    </div>
  );
}
