import { useId, type SelectHTMLAttributes } from "react";

export interface SelectOption {
  value: string;
  label: string;
}

export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
  label?: string;
  options: SelectOption[];
}

export function Select({ label, options, id, className = "", ...rest }: SelectProps) {
  const reactId = useId();
  const selectId = id ?? `select-${reactId}`;
  return (
    <div className="ps-field">
      {label && <label htmlFor={selectId} className="ps-field-label">{label}</label>}
      <select id={selectId} className={`ps-select ${className}`.trim()} {...rest}>
        {options.map((o) => (
          <option key={o.value} value={o.value}>{o.label}</option>
        ))}
      </select>
    </div>
  );
}