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(
      "focus-visible:tw-figr-ring-ring focus-visible:tw-figr-ring-2 focus-visible:tw-figr-ring-offset-2 focus-visible:tw-figr-ring-offset-background tw-figr-border-2 tw-figr-border-transparent data-[state=checked]:tw-figr-bg-primary data-[state=unchecked]:tw-figr-bg-neutral-200 tw-figr-h-6 tw-figr-w-11 tw-figr-shrink-0 tw-figr-rounded-full focus-visible:tw-figr-outline-none disabled:tw-figr-cursor-not-allowed disabled:tw-figr-opacity-50 tw-figr-inline-flex tw-figr-cursor-pointer tw-figr-items-center tw-figr-transition-colors peer",
      className
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "tw-figr-ring-0 tw-figr-bg-base-white tw-figr-h-5 tw-figr-w-5 tw-figr-rounded-full tw-figr-shadow-lg tw-figr-pointer-events-none tw-figr-block tw-figr-transition-transform data-[state=checked]:tw-figr-translate-x-5 data-[state=unchecked]:tw-figr-translate-x-0"
      )}
    />
  </SwitchPrimitives.Root>
));
Switch.displayName = SwitchPrimitives.Root.displayName;

export { Switch };