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

export function Slider({ value, onChange, min = 0, max = 100, step = 1, label }: SliderProps) {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div>
      {label && (
        <div class="flex justify-between mb-1.5">
          <span class="text-[var(--z-font-sm)] font-mono" style={{ color: "var(--z-muted)" }}>{label}</span>
          <span class="text-[var(--z-font-sm)] font-mono" style={{ color: "var(--z-accent-light)" }}>{value}</span>
        </div>
      )}
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onInput={(e) => onChange(parseFloat((e.target as HTMLInputElement).value))}
        class="w-full h-1.5 rounded-full appearance-none cursor-pointer"
        style={{ background: `linear-gradient(to right, var(--z-accent) ${pct}%, var(--z-card-bg) ${pct}%)`, accentColor: "var(--z-accent)" }}
      />
    </div>
  );
}
