import React from 'react'
import '../styles/VolumeSlider.css'

export const VolumeSlider: React.FC<{
  label: string
  value: number
  onChange: (value: number) => void
  min?: number
  max?: number
  step?: number
}> = ({
  label,
  value,
  onChange,
  min = 0,
  max = 1,
  step = 0.01
}) => {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = parseFloat(event.target.value)
    onChange(newValue)
  }

  const percentage = Math.round((value / max) * 100)

  return (
    <div className="volume-slider">
      <div className="volume-slider-header">
        <label className="volume-slider-label">{label}</label>
        <span className="volume-slider-value">{percentage}%</span>
      </div>
      <input
        type="range"
        className="volume-slider-input"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={handleChange}
      />
    </div>
  )
}