"use client"

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

interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
    onCheckedChange?: (checked: boolean) => void
}

const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
    ({ className, checked, onCheckedChange, disabled, ...props }, ref) => (
        <label className={cn(
            "relative inline-flex items-center cursor-pointer",
            disabled && "cursor-not-allowed opacity-50"
        )}>
            <input
                type="checkbox"
                className="sr-only peer"
                ref={ref}
                checked={checked}
                disabled={disabled}
                onChange={(e) => onCheckedChange?.(e.target.checked)}
                {...props}
            />
            <div className={cn(
                "w-11 h-6 rounded-full transition-colors",
                "bg-muted peer-checked:bg-primary",
                "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background",
                "after:content-[''] after:absolute after:top-[2px] after:left-[2px]",
                "after:bg-background after:border after:border-muted after:rounded-full",
                "after:h-5 after:w-5 after:transition-transform",
                "peer-checked:after:translate-x-5 peer-checked:after:border-primary",
                className
            )}></div>
        </label>
    )
)
Switch.displayName = "Switch"

export { Switch }