"use client";

interface SliderProps {
  min: number;
  max: number;
  value: number;
  onChange: (value: number) => void;
  step?: number;
  label?: string;
  unit?: string;
  className?: string;
}

export function Slider({
  min,
  max,
  value,
  onChange,
  step = 1,
  label,
  unit,
  className = "",
}: SliderProps) {
  return (
    <div className={`flex flex-col gap-2 ${className}`}>
      {(label || unit) && (
        <div className="flex items-center justify-between">
          {label && (
            <label className="text-sm font-medium text-zinc-300">
              {label}
            </label>
          )}
          <span className="text-sm font-semibold text-accent tabular-nums">
            {value}
            {unit && <span className="ml-0.5 text-zinc-400">{unit}</span>}
          </span>
        </div>
      )}
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        className="range-slider w-full h-2 rounded-full appearance-none cursor-pointer bg-zinc-700"
      />
    </div>
  );
}