"use client";

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";

export type SelectOption = { value: string; label: string };

/**
 * Select étiqueté sur une liste d'options — la base partagée de tous les sélecteurs de
 * l'application (pays, langue, site, cible, format d'import). Un seul rendu, une seule
 * gestion du `null` de Base UI, pas de variante par écran.
 */
export function OptionSelect({
  id,
  label,
  options,
  value,
  onValueChange,
  disabled,
  className,
}: {
  id: string;
  label: string;
  options: SelectOption[];
  value: string;
  onValueChange: (value: string) => void;
  disabled?: boolean;
  className?: string;
}) {
  return (
    <Select
      items={options}
      value={value}
      disabled={disabled}
      // Base UI type la valeur `string | null` ; nos options couvrent toujours la valeur
      // courante, un `null` n'est donc pas un état atteignable et ne change rien.
      onValueChange={(next) => {
        if (next !== null) onValueChange(next);
      }}
    >
      <SelectTrigger id={id} aria-label={label} className={cn("h-9 w-full", className)}>
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          {options.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}