'use client'

export interface NumberFieldProps {
  label: string
  value?: number
  onChange: (value: number) => void
  min?: number
  max?: number
  required?: boolean
  helpText?: string
  error?: string
}

export function NumberField({
  label,
  value,
  onChange,
  min,
  max,
  required,
  helpText,
  error,
}: NumberFieldProps) {
  return (
    <div>
      <label className="mb-1 block text-sm font-medium">
        {label}
        {required && <span className="ml-0.5 text-[var(--destructive)]">*</span>}
      </label>
      <input
        type="number"
        value={value ?? ''}
        onChange={(e) => onChange(Number(e.target.value))}
        min={min}
        max={max}
        required={required}
        className={`w-full rounded-md border bg-[var(--input-background)] px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)] ${
          error ? 'border-[var(--destructive)]' : 'border-[var(--border)]'
        }`}
      />
      {min !== undefined && max !== undefined && (
        <p className="mt-1 text-xs text-[var(--muted-foreground)]">
          Range: {min} – {max}
        </p>
      )}
      {helpText && !error && (
        <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>
      )}
      {error && <p className="mt-1 text-xs text-[var(--destructive)]">{error}</p>}
    </div>
  )
}
