"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = PHXToggle;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const ToolTip_1 = tslib_1.__importDefault(require("../ToolTip/ToolTip"));
function PHXToggle({ onChange, active, disabled = false, helpText }) {
    const toggle = (react_1.default.createElement("label", { className: `ml-2 inline-flex items-center ${disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}` },
        react_1.default.createElement("input", { "aria-label": 'Toggle option', checked: active, className: 'peer absolute hidden', disabled: disabled, onChange: () => {
                if (!disabled)
                    onChange(!active);
            }, type: 'checkbox' }),
        react_1.default.createElement("div", { className: "\n           peer relative h-5 w-8 rounded-[0.4rem] bg-slate-300 transition-colors\n              after:absolute after:left-[4px] after:top-1/2 after:h-[12px]\n              after:w-[12px] after:translate-y-[-50%] after:rounded-[3px]\n              after:bg-white after:transition-transform\n              after:content-[''] peer-checked:bg-black peer-checked:after:translate-x-3\n              peer-disabled:bg-slate-200 peer-disabled:after:bg-slate-50\n              peer-disabled:peer-checked:bg-slate-300\n              dark:border-gray-600 dark:bg-gray-500\n            " })));
    if (helpText) {
        return (react_1.default.createElement(ToolTip_1.default, { content: helpText, placement: 'top' }, toggle));
    }
    return toggle;
}
//# sourceMappingURL=Toggle.js.map