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

import { cn } from '@/lib/utils';

type SliderVariant = 'default' | 'blue' | 'orange';

const variantStyles: Record<SliderVariant, { track: string; range: string; thumb: string }> = {
  default: {
    track: 'h-2 bg-secondary',
    range: 'bg-primary',
    thumb: 'h-5 w-5 border-2 border-primary',
  },
  blue: {
    track: 'h-3 bg-blue-100',
    range: 'bg-blue-500',
    thumb: 'h-6 w-6 border-2 border-blue-500',
  },
  orange: {
    track: 'h-2 bg-orange-100',
    range: 'bg-orange-500',
    thumb: 'h-5 w-5 border-2 border-orange-500',
  },
};

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

const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
  ({ className, variant = 'default', ...props }, ref) => {
    const styles = variantStyles[variant];
    return (
      <SliderPrimitive.Root
        ref={ref}
        className={cn('relative flex w-full touch-none select-none items-center', className)}
        {...props}
      >
        <SliderPrimitive.Track className={cn('relative w-full grow overflow-hidden rounded-full', styles.track)}>
          <SliderPrimitive.Range className={cn('absolute h-full', styles.range)} />
        </SliderPrimitive.Track>
        <SliderPrimitive.Thumb
          className={cn(
            'block rounded-full bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
            styles.thumb,
          )}
        />
      </SliderPrimitive.Root>
    );
  },
);
Slider.displayName = SliderPrimitive.Root.displayName;

export { Slider };
