import * as React from "react";
import { Slider as SliderPrimitive } from "@base-ui/react/slider";
import { cn } from "@/lib/utils";

/**
 * Slider — WealthX Design System
 *
 * Built on @base-ui/react/slider. Uses thumbAlignment="edge" so the thumb
 * stays fully within the control at min/max without overflowing.
 */

interface SliderProps {
  value?: number;
  defaultValue?: number;
  min?: number;
  max?: number;
  step?: number;
  disabled?: boolean;
  onValueChange?: (value: number) => void;
  className?: string;
}

const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
  (
    {
      className,
      value,
      defaultValue = 0,
      min = 0,
      max = 100,
      step = 1,
      disabled = false,
      onValueChange,
    },
    ref,
  ) => {
    return (
      <SliderPrimitive.Root
        ref={ref}
        value={value}
        defaultValue={defaultValue}
        min={min}
        max={max}
        step={step}
        disabled={disabled}
        thumbAlignment="edge"
        onValueChange={(val) => onValueChange?.(val as number)}
        data-slot="slider"
        className={cn(
          "relative w-full touch-none select-none",
          disabled && "opacity-50",
          className,
        )}
      >
        <SliderPrimitive.Control
          className="relative flex h-5 w-full cursor-pointer items-center"
          data-slot="slider-control"
        >
          <SliderPrimitive.Track
            className="relative h-2 w-full overflow-hidden rounded-full bg-muted"
            data-slot="slider-track"
          >
            <SliderPrimitive.Indicator
              className="absolute h-full rounded-full bg-primary"
              data-slot="slider-indicator"
            />
          </SliderPrimitive.Track>
          <SliderPrimitive.Thumb
            className={cn(
              "block size-5 rounded-full border-2 border-primary bg-background shadow-sm",
              "outline-none",
            )}
            data-slot="slider-thumb"
          />
        </SliderPrimitive.Control>
      </SliderPrimitive.Root>
    );
  },
);

Slider.displayName = "Slider";

export { Slider };
export type { SliderProps };