"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { useControllableState } from "@/lib/use-controllable-state";
import type { Locale } from "./types";

export interface LanguageSelectProps extends Omit<
  React.ComponentPropsWithoutRef<"select">,
  "value" | "defaultValue" | "onChange"
> {
  /** Available locales — only `code` is required */
  locales: Locale[];
  /** Selected locale code. Provide this to control the component. */
  value?: string;
  /** Initial locale code when uncontrolled */
  defaultValue?: string;
  /** Fired once per selection */
  onValueChange?: (code: string) => void;
}

export const LanguageSelect = React.forwardRef<HTMLSelectElement, LanguageSelectProps>(
  function LanguageSelect(
    { locales, value, defaultValue, onValueChange, className, ...rest },
    ref,
  ) {
    const [locale, setLocale] = useControllableState(
      value,
      defaultValue ?? locales[0]?.code ?? "",
      onValueChange,
    );

    return (
      <select
        ref={ref}
        value={locale}
        onChange={(e) => setLocale(e.target.value)}
        className={cn(
          "h-10 rounded-md border border-zinc-200 bg-white px-3 text-sm outline-none transition-colors focus:border-emerald-500 dark:border-zinc-800 dark:bg-zinc-900",
          className,
        )}
        {...rest}
      >
        {locales.map((l) => (
          <option key={l.code} value={l.code}>
            {l.label ?? l.code}
          </option>
        ))}
      </select>
    );
  },
);