import * as React from "react"
import { cn } from "@/lib/utils"

interface SliderProps {
    value: number[]
    max: number
    step: number
    onValueChange: (val: number[]) => void
    className?: string
}

export const Slider = ({ value, max, step, onValueChange, className }: SliderProps) => {
    return (
        <input
            type="range"
            min={0}
            max={max}
            step={step}
            value={value[0]}
            onChange={(e) => onValueChange([parseFloat(e.target.value)])}
            className={cn("w-full h-2 bg-secondary rounded-lg appearance-none cursor-pointer accent-primary", className)}
        />
    )
}
