import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import "./style.scss";
import { v4 as uuidv4 } from "uuid";
const CheckboxComponent = ({ checked = false, onClick, id = uuidv4(), sizeVariant = "sm", isDisabled = false, dataCy, }) => {
    const [isOn, setIsOn] = useState(checked);
    useEffect(() => {
        setIsOn(checked);
    }, [checked]);
    const handleToggle = () => {
        setIsOn(!isOn);
        onClick(!isOn);
    };
    return (_jsx("input", { type: "checkbox", className: isDisabled
            ? `checkBoxComponent--Generic ${sizeVariant}SizeCheckBox disabled-CheckBox`
            : `checkBoxComponent--Generic ${sizeVariant}SizeCheckBox notDisabled-CheckBox`, id: `${id}`, checked: isOn, onChange: handleToggle, disabled: isDisabled, "data-cy": dataCy }));
};
export default CheckboxComponent;
