import * as React from "react";
import { cn } from "@/lib/utils";

export interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
  checked?: boolean;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
}

export const Switch = ({ className, checked: controlled, defaultChecked, onCheckedChange, ...props }: SwitchProps) => {
  const [internal, setInternal] = React.useState(!!defaultChecked);
  const checked = controlled ?? internal;
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      onClick={() => { setInternal(!checked); onCheckedChange?.(!checked); }}
      className={cn(
        "relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
        checked ? "bg-indigo-600" : "bg-slate-300",
        className
      )}
      {...props}
    >
      <span className={cn("inline-block h-4 w-4 transform rounded-full bg-white transition-transform", checked ? "translate-x-6" : "translate-x-1")} />
    </button>
  );
};

export default Switch;