"use client";

import * as React from "react";

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

type SwitchProps = Omit<
  React.InputHTMLAttributes<HTMLInputElement>,
  "type" | "onChange"
> & {
  onCheckedChange?: (checked: boolean) => void;
  onChange?: React.ChangeEventHandler<HTMLInputElement>;
};

const Switch = React.forwardRef<
  HTMLInputElement,
  SwitchProps
>(({ className, onCheckedChange, onChange, ...props }, ref) => (
  <input
    ref={ref}
    type="checkbox"
    role="switch"
    onChange={(event) => {
      onChange?.(event);
      onCheckedChange?.(event.currentTarget.checked);
    }}
    className={cn(
      "peer h-5 w-9 shrink-0 cursor-pointer appearance-none rounded-full border border-transparent bg-input shadow-sm transition-colors checked:bg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
      "before:block before:h-4 before:w-4 before:translate-x-0 before:rounded-full before:bg-background before:shadow before:transition-transform checked:before:translate-x-4",
      className,
    )}
    {...props}
  />
));
Switch.displayName = "Switch";

export { Switch };
