/**
 * Slider Component
 *
 * Wrapper around Radix UI Slider for consistent styling.
 */

import * as RadixSlider from "@radix-ui/react-slider";

interface SliderProps {
  value: number;
  onValueChange: (value: number) => void;
  min?: number;
  max?: number;
  step?: number;
  disabled?: boolean;
  className?: string;
  /** Show the current value next to the slider */
  showValue?: boolean;
  /** Unit to display after value (e.g., "px", "%") */
  unit?: string;
  /** Use compact size for floating panels */
  size?: "default" | "compact";
}

export function Slider({
  value,
  onValueChange,
  min = 0,
  max = 100,
  step = 1,
  disabled = false,
  className = "",
  showValue = false,
  unit = "",
  size = "default",
}: SliderProps) {
  const rootClass =
    size === "compact" ? "floating-popover__slider" : "slider-root";

  const trackClass =
    size === "compact" ? "floating-popover__slider-track" : "slider-track";

  const rangeClass =
    size === "compact" ? "floating-popover__slider-range" : "slider-range";

  const thumbClass =
    size === "compact" ? "floating-popover__slider-thumb" : "slider-thumb";

  const slider = (
    <RadixSlider.Root
      className={`${rootClass} ${className}`}
      value={[value]}
      onValueChange={([v]) => onValueChange(v)}
      min={min}
      max={max}
      step={step}
      disabled={disabled}
    >
      <RadixSlider.Track className={trackClass}>
        <RadixSlider.Range className={rangeClass} />
      </RadixSlider.Track>
      <RadixSlider.Thumb className={thumbClass} />
    </RadixSlider.Root>
  );

  if (showValue) {
    return (
      <div className="flex items-center gap-2">
        {slider}
        <span className="text-xs text-gray-600 min-w-8 text-right">
          {Math.round(value * 100) / 100}
          {unit}
        </span>
      </div>
    );
  }

  return slider;
}

export default Slider;
