"use client";

import { useLocale } from "next-intl";
import { useTransition } from "react";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { type Locale, localeLabels, locales } from "@/i18n/config";
import { setUserLocale } from "@/i18n/locale-actions";

export function LanguageSelector({ className }: { className?: string }) {
  const current = useLocale() as Locale;
  const [pending, startTransition] = useTransition();
  return (
    <Select
      value={current}
      disabled={pending}
      onValueChange={(value) =>
        startTransition(() => {
          void setUserLocale(value as Locale);
        })
      }
    >
      <SelectTrigger className={className}>
        <SelectValue />
      </SelectTrigger>
      <SelectContent position="popper">
        {locales.map((loc) => (
          <SelectItem key={loc} value={loc}>
            {localeLabels[loc]}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}