'use client';
import clsx from 'clsx';
import { useEffect, useState } from 'react';
import { Paragraph } from '../Paragraph';
/**
 * Switch component for rendering a toggle switch with optional label.
 *
 * @component
 * @example
 * // Example usage of Switch component
 * <Switch
 *   isChecked={true}
 *   isDisabled={false}
 *   label="Enable feature"
 *   onChange={(checked) => console.log(checked)}
 *   onClick={(rollback, commit) => {
 *     if (confirm('Are you sure?')) {
 *       commit();
 *     } else {
 *       rollback();
 *     }
 *   }}
 * />
 *
 * @param {boolean} isChecked - Initial checked state of the switch.
 * @param {boolean} [isDisabled=false] - Optional boolean to disable the switch.
 * @param {string} [label] - Optional label to be displayed next to the switch.
 * @param {function} [onChange] - Optional callback function to handle change in checked state.
 * @param {function} [onClick] - Optional callback function to handle click events with rollback and commit actions.
 *
 * @returns {ReactNode} The rendered Switch component.
 */
export function Switch({ isChecked, isDisabled = false, label, onChange, onClick, }) {
    const [checked, setChecked] = useState(isChecked);
    const [disable, setDisable] = useState(isDisabled);
    const handleChange = (event) => {
        onChange?.(event.target.checked);
    };
    const handleClick = () => {
        debugger;
        if (!onClick) {
            return setChecked((prevState) => !prevState);
        }
        setChecked((prevState) => {
            setDisable(true);
            onClick(() => {
                setChecked(prevState);
                setDisable(false);
            }, () => {
                setDisable(false);
            });
            return !prevState;
        });
    };
    useEffect(() => {
        setChecked(isChecked);
    }, [isChecked]);
    useEffect(() => {
        setDisable(isDisabled);
    }, [isDisabled]);
    return (<label className={clsx('inline-flex items-center', disable ? 'select-none' : 'cursor-pointer')}>
      <input type="checkbox" className="peer hidden" checked={checked} onChange={handleChange} onClick={handleClick} disabled={disable}/>
      <div className="bg-gray-3 after:border-gray-3 relative h-5 w-12 rounded-full peer-checked:bg-black peer-disabled:opacity-80 after:absolute after:-top-0.5 after:size-6 after:rounded-full after:border after:bg-white after:shadow-sm after:shadow-[rgba(0,0,0,.5)] after:transition-all peer-checked:after:translate-x-full"/>
      <Paragraph size="subtitle-1" className="ms-2">
        {label}
      </Paragraph>
    </label>);
}
//# sourceMappingURL=Switch.jsx.map