import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "smx-peer smx-inline-flex smx-h-6 smx-w-11 smx-shrink-0 smx-cursor-pointer smx-items-center smx-rounded-full smx-border-2 smx-border-transparent smx-transition-colors focus-visible:smx-outline-none focus-visible:smx-ring-2 focus-visible:smx-ring-ring focus-visible:smx-ring-offset-2 focus-visible:smx-ring-offset-background disabled:smx-cursor-not-allowed disabled:smx-opacity-50 data-[state=checked]:smx-bg-primary data-[state=unchecked]:smx-bg-input",
      className
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "smx-pointer-events-none smx-block smx-h-5 smx-w-5 smx-rounded-full smx-bg-background smx-shadow-lg smx-ring-0 smx-transition-transform data-[state=checked]:smx-translate-x-5 data-[state=unchecked]:smx-translate-x-0"
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }