import * as SliderPrimitive from '@radix-ui/react-slider';

interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
  className?: string;
}

export function Slider({ className, ...props }: SliderProps) {
  return (
    <SliderPrimitive.Root
      className={`relative flex w-full touch-none select-none items-center ${className || ''}`}
      {...props}
    >
      <SliderPrimitive.Track
        className="relative h-2 w-full grow overflow-hidden rounded-full bg-warm-200 dark:bg-navy-700"
        onPointerDown={(e) => e.preventDefault()}
      >
        <SliderPrimitive.Range className="absolute h-full bg-teal-600" />
      </SliderPrimitive.Track>
      {props.value?.map((_, i) => (
        <SliderPrimitive.Thumb
          key={i}
          className="relative block h-6 w-6 cursor-pointer rounded-full border-2 border-teal-600 bg-white ring-offset-white transition-colors before:absolute before:left-1/2 before:top-1/2 before:h-14 before:w-14 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:content-[''] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-600 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-teal-500 dark:bg-navy-800 dark:ring-offset-navy-950 md:before:h-11 md:before:w-11"
        />
      ))}
    </SliderPrimitive.Root>
  );
}
