import { forwardRef } from 'react';
import { cx } from 'class-variance-authority';
import * as SliderPrimitive from '@radix-ui/react-slider';

import './slider.css';

type SliderProps = SliderPrimitive.SliderProps & {
  transparentRange?: boolean;
};

export const Slider = forwardRef<HTMLSpanElement, SliderProps>(({ className, transparentRange, ...delegated }, ref) => {
  return (
    <SliderPrimitive.Root className={cx('c-slider-root', className)} ref={ref} {...delegated}>
      <SliderPrimitive.Track className="c-slider-track">
        <SliderPrimitive.Range className={`c-slider-range ${transparentRange ? 'c-slider-range-transparent' : ''}`} />
      </SliderPrimitive.Track>
      <SliderPrimitive.Thumb className="c-slider-thumb" />
    </SliderPrimitive.Root>
  );
});
