import { useFormContext } from 'react-hook-form';
import { FieldError } from './FieldError';

type Option = { value: string; label: string };

type Props = {
  name: string;
  label: string;
  options: Option[];
  hint?: string;
};

export function SelectField({ name, label, options, hint }: Props) {
  const { register } = useFormContext();
  return (
    <label className="block">
      <span className="block font-mono text-xs uppercase tracking-widest text-[color:var(--color-cyan)] mb-1.5">
        {label}
      </span>
      {hint && (
        <span className="block font-mono text-[10px] text-[color:var(--color-text-dim)] mb-1.5">
          {hint}
        </span>
      )}
      <select
        {...register(name)}
        className="w-full bg-[color:var(--color-surface-2)] border border-[color:var(--color-border)] focus:border-[color:var(--color-cyan)] focus:outline-none p-2.5 rounded text-sm text-[color:var(--color-text)] transition-colors"
      >
        {options.map((opt) => (
          <option key={opt.value} value={opt.value}>
            {opt.label}
          </option>
        ))}
      </select>
      <FieldError name={name} />
    </label>
  );
}
