import type { VariantProps } from "class-variance-authority"
import { cva } from "class-variance-authority"

export { default as Slider } from "./Slider.vue"

export const sliderVariants = cva(
  "relative flex touch-none select-none items-center data-[orientation=vertical]:flex-col",
  {
    variants: {
      size: {
        sm: "data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
        default: "data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
        lg: "data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
      },
      orientation: {
        horizontal: "w-full",
        vertical: "h-full flex-col w-fit",
      },
    },
    defaultVariants: {
      size: "default",
      orientation: "horizontal",
    },
  },
)

export const sliderTrackVariants = cva(
  "relative grow overflow-hidden rounded-full bg-secondary",
  {
    variants: {
      size: {
        sm: "data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5",
        default: "data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2",
        lg: "data-[orientation=horizontal]:h-3 data-[orientation=vertical]:w-3",
      },
    },
    defaultVariants: {
      size: "default",
    },
  },
)

export const sliderThumbVariants = cva(
  "block rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      size: {
        sm: "h-4 w-4",
        default: "h-5 w-5",
        lg: "h-6 w-6",
      },
    },
    defaultVariants: {
      size: "default",
    },
  },
)

export type SliderVariants = VariantProps<typeof sliderVariants>
