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

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

export function Slider({
	value,
	onValueChange,
	max = 100,
	min = 0,
	step = 1,
	className,
	disabled = false,
}: SliderProps) {
	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		const newValue = Number.parseFloat(e.target.value);
		onValueChange?.([newValue]);
	};

	return (
		<input
			type="range"
			min={min}
			max={max}
			step={step}
			value={value[0] || 0}
			onChange={handleChange}
			disabled={disabled}
			className={cn(
				"h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700",
				"[&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none",
				"[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary",
				"[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:transition-all",
				"[&::-webkit-slider-thumb]:hover:bg-primary/90",
				"[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full",
				"[&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary",
				"[&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:transition-all",
				"[&::-moz-range-thumb]:hover:bg-primary/90",
				"disabled:cursor-not-allowed disabled:opacity-50",
				className,
			)}
		/>
	);
}
