import * as React from "react";

export interface SliderProps {
  id?: string;
  min?: number;
  max?: number;
  step?: number;
  value?: number[];
  defaultValue?: number[];
  onValueChange?: (value: number[]) => void;
  disabled?: boolean;
  className?: string;
}

export const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
  (
    {
      id,
      min = 0,
      max = 100,
      step = 1,
      value,
      defaultValue,
      onValueChange,
      disabled,
      className = "",
    },
    ref
  ) => {
    const currentValue = value?.[0] ?? defaultValue?.[0] ?? min;

    return (
      <input
        type="range"
        role="slider"
        ref={ref}
        id={id}
        min={min}
        max={max}
        step={step}
        value={currentValue}
        onChange={(e) => {
          onValueChange?.([parseFloat(e.target.value)]);
        }}
        disabled={disabled}
        aria-valuemin={min}
        aria-valuemax={max}
        aria-valuenow={currentValue}
        className={`w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-200 accent-blue-500 ${className}`}
      />
    );
  }
);

Slider.displayName = "Slider";