"use client";

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

import { routing } from "@/i18n/routing";
import { usePathname, useRouter } from "@/i18n/navigation";
import { cn } from "@/lib/utils";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function LanguageSwitcher({ className }: { className?: string }) {
  const locale = useLocale();
  const pathname = usePathname();
  const { replace } = useRouter();
  const [isPending, startTransition] = useTransition();

  const handleLanguageChange = (l: string) => {
    startTransition(() => {
      const search = window.location.search;
      const href = search ? `${pathname}${search}` : pathname;
      replace(href, {locale: l});
    });
  };

  return (
    <Tabs defaultValue={locale} className={cn("flex items-center gap-1", className)}>
      <TabsList>
        {routing.locales.map((l) => (
          <TabsTrigger key={l} value={l} disabled={isPending} className="text-xs" onClick={() => handleLanguageChange(l)}>
            {l.toUpperCase()}
          </TabsTrigger>
        ))}
      </TabsList>
    </Tabs>
  );
}