import React from "react";

export function Slider({ value, defaultValue = 50, onValueChange, min = 0, max = 100, step = 1, disabled, className = "", ...props }) {
  const [internal, setInternal] = React.useState(defaultValue);
  const val = value !== undefined ? value : internal;
  const pct = ((val - min) / (max - min)) * 100;
  return (
    <div className={["o-slider", className].filter(Boolean).join(" ")} data-slot="slider-control" {...props}>
      <div className="o-slider__track" data-slot="slider-track">
        <div className="o-slider__indicator" data-slot="slider-indicator" style={{ width: "calc(" + pct + "% - 2px)" }} />
        <span className="o-slider__thumb" data-slot="slider-thumb" style={{ insetInlineStart: pct + "%" }} />
        <input type="range" min={min} max={max} step={step} value={val} disabled={disabled}
          onChange={(e) => { const v = Number(e.target.value); if (value === undefined) setInternal(v); if (onValueChange) onValueChange(v); }}
          style={{ position: "absolute", inset: "-8px 0", width: "100%", opacity: 0, cursor: "pointer", margin: 0 }} aria-label="Slider" />
      </div>
    </div>
  );
}
