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 
      title={props.title} 
      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 peer"
        {...props}
      />
      <div className={cn(
        "w-7 h-4 rounded-full peer transition-colors",
        disabled 
          ? "bg-gray-300" 
          : "bg-gray-200 peer-focus:outline-none peer-focus:ring-1 peer-focus:ring-success peer-checked:bg-success"
      )}></div>
      <div className="absolute top-1 w-2 h-2 bg-white rounded-full transition-all left-0.5 peer-checked:left-auto peer-checked:right-0.5"></div>
    </label>
  )
);
Switch.displayName = "Switch";