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

export interface SelectFieldProps {
  label: string
  value: string
  onChange: (value: string) => void
  options: SelectOption[]
  disabled?: boolean
  description?: string
}

/**
 * Canonical select field (RTL, admin-tailwind friendly).
 * Use this as the base for specialized selects (border style, position, animation, columns).
 */
export function SelectField({
  label,
  value,
  onChange,
  options,
  disabled = false,
  description,
}: SelectFieldProps) {
  return (
    <div className="space-y-1.5" dir="rtl">
      <div className="flex items-center justify-between">
        <label className="text-sm font-medium text-gray-700">{label}</label>
      </div>
      {description ? <p className="text-xs text-gray-400">{description}</p> : null}
      <select
        value={value}
        onChange={(e) => onChange(e.target.value)}
        disabled={disabled}
        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-1 focus:ring-primary-500 focus:border-primary-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
      >
        {options.map((opt) => (
          <option key={opt.value} value={opt.value}>
            {opt.label}
          </option>
        ))}
      </select>
    </div>
  )
}

export default SelectField

