import { ChevronDownIcon } from 'lucide-react';
import { cn } from '#/lib/utils.js';

/**
 * One labelled dropdown over a fixed set of choices, controlled by the caller.
 * Options come as [value, label] pairs; values travel as strings, the way a
 * native select reports them.
 */
export function SelectField({
  className,
  label,
  options,
  value,
  onChange,
  ...props
}) {
  return (
    <label className={cn('flex flex-col gap-1.5', className)}>
      <span className="text-[13px] text-muted-foreground">{label}</span>
      <div className="relative">
        <select
          value={value}
          onChange={(event) => onChange(event.target.value)}
          className={cn(
            'h-11 w-full appearance-none rounded-xl border border-input bg-transparent px-3.5 pr-10 text-base text-foreground shadow-xs outline-none transition-colors md:text-sm',
            'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
          )}
          {...props}
        >
          {options.map(([optionValue, optionLabel]) => (
            <option key={optionValue} value={optionValue}>
              {optionLabel}
            </option>
          ))}
        </select>
        <ChevronDownIcon className="-translate-y-1/2 pointer-events-none absolute top-1/2 right-3.5 size-4 text-faint" />
      </div>
    </label>
  );
}