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

function Slider({
  className,
  defaultValue,
  value,
  min = 0,
  max = 100,
  ...props
}) {
  const _values = Array.isArray(value)
    ? value
    : Array.isArray(defaultValue)
      ? defaultValue
      : [min, max];

  return (
    <SliderPrimitive.Root
      className={cn(
        "ino:data-horizontal:w-full ino:data-vertical:h-full",
        className,
      )}
      data-slot="slider"
      defaultValue={defaultValue}
      value={value}
      min={min}
      max={max}
      thumbAlignment="edge"
      {...props}
    >
      <SliderPrimitive.Control className="ino:relative ino:flex ino:w-full ino:touch-none ino:items-center ino:select-none ino:data-disabled:opacity-50 ino:data-vertical:h-full ino:data-vertical:min-h-40 ino:data-vertical:w-auto ino:data-vertical:flex-col">
        <SliderPrimitive.Track
          data-slot="slider-track"
          className="ino:relative ino:grow ino:overflow-hidden ino:rounded-full ino:bg-muted ino:select-none ino:data-horizontal:h-1.5 ino:data-horizontal:w-full ino:data-vertical:h-full ino:data-vertical:w-1.5"
        >
          <SliderPrimitive.Indicator
            data-slot="slider-range"
            className="ino:bg-primary ino:select-none ino:data-horizontal:h-full ino:data-vertical:w-full"
          />
        </SliderPrimitive.Track>
        {Array.from({ length: _values.length }, (_, index) => (
          <SliderPrimitive.Thumb
            data-slot="slider-thumb"
            key={index}
            className="ino:block ino:size-4 ino:shrink-0 ino:rounded-full ino:border ino:border-primary ino:bg-white ino:shadow-sm ino:ring-ring/50 ino:transition-[color,box-shadow] ino:select-none ino:hover:ring-4 ino:focus-visible:ring-4 ino:focus-visible:outline-hidden ino:disabled:pointer-events-none ino:disabled:opacity-50"
          />
        ))}
      </SliderPrimitive.Control>
    </SliderPrimitive.Root>
  );
}

export { Slider };