type RangeSliderProps = {
  min: number
  max: number
  step: number
  value: number
  onChange: (value: number) => void
}

/** 채워진 트랙이 값을 따라가는 파란 슬라이더 (ROI 시뮬레이터·히어로 콘솔 공용). */
function RangeSlider({ min, max, step, value, onChange }: RangeSliderProps) {
  const filled = ((value - min) / (max - min)) * 100
  return (
    <input
      type="range"
      min={min}
      max={max}
      step={step}
      value={value}
      onChange={(e) => onChange(Number(e.target.value))}
      className="w-full h-1.5 rounded-lg appearance-none cursor-pointer accent-primary transition-all"
      style={{
        background: `linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) ${filled}%, var(--color-line-strong) ${filled}%, var(--color-line-strong) 100%)`,
      }}
    />
  )
}

export { RangeSlider }