import * as React from 'react'
import * as SliderPrimitive from '@radix-ui/react-slider'
import tw from 'twin.macro'

// https://www.radix-ui.com/docs/primitives/components/slider
const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ ...props }, ref) => (
  <SliderPrimitive.Root
    ref={ref}
    tw="relative flex w-full touch-none select-none items-center"
    {...props}
  >
    <SliderPrimitive.Track tw="relative h-2 w-full grow overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800">
      <SliderPrimitive.Range tw="absolute h-full bg-slate-900 dark:bg-slate-400" />
    </SliderPrimitive.Track>
    <SliderPrimitive.Thumb
      css={tw`
      block
      h-5
      w-5
      rounded-full
      border-2
      border-slate-900
      bg-white
      transition-colors
      focus:outline-none
      focus:ring-2
      focus:ring-slate-400
      focus:ring-offset-2
      disabled:pointer-events-none
      disabled:opacity-50
      dark:border-slate-100
      dark:bg-slate-400
      dark:focus:ring-slate-400
      dark:focus:ring-offset-slate-900
    `}
    />
  </SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

const _Slider = Slider
export { _Slider as Slider }
