import '../styles/font-size-control.css'

interface FontSizeControlProps {
  fontSize: number
  onFontSizeChange: (size: number) => void
  min: number
  max: number
}

export function FontSizeControl({ fontSize, onFontSizeChange, min, max }: FontSizeControlProps) {
  return (
    <div className="font-size-control">
      <button
        className="font-size-btn"
        onClick={() => onFontSizeChange(fontSize - 1)}
        disabled={fontSize <= min}
        title="Decrease font size"
        aria-label="Decrease font size"
      >
        A−
      </button>
      <span className="font-size-value">{fontSize}</span>
      <button
        className="font-size-btn"
        onClick={() => onFontSizeChange(fontSize + 1)}
        disabled={fontSize >= max}
        title="Increase font size"
        aria-label="Increase font size"
      >
        A+
      </button>
    </div>
  )
}
