import type { CSSProperties } from "react";

export type BottomControlSliderProps = {
  "aria-label": string;
  min: number;
  max: number;
  value: number;
  step?: number;
  className?: string;
  onValueChange: (value: number) => void;
};

type SliderStyle = CSSProperties & {
  "--slider-progress": string;
};

export function BottomControlSlider({ min, max, value, step = 1, className = "", onValueChange, ...props }: BottomControlSliderProps) {
  const progress = max === min ? 0 : ((value - min) / (max - min)) * 100;

  return (
    <input
      {...props}
      type="range"
      min={min}
      max={max}
      step={step}
      value={value}
      className={`bottom-control-slider ${className}`}
      style={{ "--slider-progress": `${Math.max(0, Math.min(100, progress))}%` } as SliderStyle}
      onChange={(event) => onValueChange(Number(event.target.value))}
    />
  );
}