import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import clsx from "clsx";
import "./style.scss";
const ToggleComponent = ({ initialState, onClick, sizeVariant = "base", isDisabled = false, dataCy, }) => {
    const [isOn, setIsOn] = useState(initialState);
    useEffect(() => {
        setIsOn(initialState);
    }, [initialState]);
    const handleToggle = () => {
        if (isDisabled)
            return;
        setIsOn(!isOn);
        onClick();
    };
    return (_jsx("div", { className: clsx(sizeVariant === "sm" ? "smSizeToggle" : "toggle", isOn ? "on" : "off", isDisabled && "disabled"), onClick: handleToggle, "data-cy": dataCy, children: _jsx("div", { className: sizeVariant === "sm" ? "smSizeToggle-switch" : "toggle-switch" }) }));
};
export default ToggleComponent;
