import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
import { cn } from "@/lib/utils";

function Switch({ className, size = "default", ...props }) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      data-size={size}
      className={cn(
        "ino:peer ino:group/switch ino:relative ino:inline-flex ino:shrink-0 ino:items-center ino:rounded-full ino:border ino:border-transparent ino:shadow-xs ino:transition-all ino:outline-none ino:group-has-[:focus-visible]/field-label:border-transparent ino:group-has-[:focus-visible]/field-label:ring-0 ino:after:absolute ino:after:-inset-x-3 ino:after:-inset-y-2 ino:focus-visible:border-ring ino:focus-visible:ring-3 ino:focus-visible:ring-ring/50 ino:aria-invalid:border-destructive ino:aria-invalid:ring-3 ino:aria-invalid:ring-destructive/20 ino:data-[size=default]:h-[18.4px] ino:data-[size=default]:w-[32px] ino:data-[size=sm]:h-[14px] ino:data-[size=sm]:w-[24px] ino:dark:aria-invalid:border-destructive/50 ino:dark:aria-invalid:ring-destructive/40 ino:data-checked:bg-primary ino:data-unchecked:bg-input ino:dark:data-unchecked:bg-input/80 ino:data-disabled:cursor-not-allowed ino:data-disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className="ino:pointer-events-none ino:block ino:rounded-full ino:bg-background ino:ring-0 ino:transition-transform ino:group-data-[size=default]/switch:size-4 ino:group-data-[size=sm]/switch:size-3 ino:group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] ino:group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] ino:dark:data-checked:bg-primary-foreground ino:group-data-[size=default]/switch:data-unchecked:translate-x-0 ino:group-data-[size=sm]/switch:data-unchecked:translate-x-0 ino:dark:data-unchecked:bg-foreground"
      />
    </SwitchPrimitive.Root>
  );
}

export { Switch };