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

export interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
  checked: boolean;
  onCheckedChange?: (checked: boolean) => void;
}

export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
  ({ checked, onCheckedChange, className, disabled, ...props }, ref) => (
    <label
      className={cn(
        "relative inline-flex items-center",
        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
        className
      )}
    >
      <input
        type="checkbox"
        checked={checked}
        onChange={e => !disabled && onCheckedChange?.(e.target.checked)}
        ref={ref}
        disabled={disabled}
        className="sr-only"
        {...props}
      />
      <div className={cn(
        "w-7 h-4 rounded-full transition-colors",
        checked ? "bg-success" : "bg-gray-200"
      )} />
      <div className={cn(
        "absolute top-1 w-2 h-2 bg-white rounded-full shadow transition-all",
        checked ? "right-0.5" : "left-0.5"
      )} />
    </label>
  )
);
Switch.displayName = "Switch";