import React from "react";

interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  value: number;
}

export function Slider({ label, className = "", ...props }: SliderProps) {
  return (
    <div className={`flex flex-col gap-1.5 ${className}`}>
      {label && (
        <div className="flex justify-between items-center">
          <label className="font-sans text-[13px] text-[var(--p-text)]">
            {label}
          </label>
          <span className="font-mono text-[11px] text-[var(--p-muted)]">
            {props.value}
          </span>
        </div>
      )}
      <input
        type="range"
        className="w-full h-1.5 bg-[var(--p-border)] rounded-full appearance-none cursor-pointer outline-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[var(--p-accent)]"
        {...props}
      />
    </div>
  );
}
