interface Props {
  value: number
  min?: number
  max?: number
  onChange: (value: number) => void
  className?: string
  style?: React.CSSProperties
  'aria-label'?: string
}

export default function NumberInput({ value, min = 0, max = 999, onChange, className, style, 'aria-label': ariaLabel }: Props) {
  const clamp = (n: number) => Math.min(max, Math.max(min, n))

  return (
    <div className={`cv-number ${className || ''}`} style={style}
      role="spinbutton" aria-valuenow={value} aria-valuemin={min} aria-valuemax={max} aria-label={ariaLabel}>
      <button className="cv-number-btn" onClick={() => onChange(clamp(value - 1))} type="button" disabled={value <= min} aria-label="Decrease">-</button>
      <span className="cv-number-value">{value}</span>
      <button className="cv-number-btn" onClick={() => onChange(clamp(value + 1))} type="button" disabled={value >= max} aria-label="Increase">+</button>
    </div>
  )
}