import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import css from './CheckBox.module.scss';
import { _cx } from 'src/utility/class';
var cx = _cx(css);
export default function CheckBox(_a) {
    var id = _a.id, checked = _a.checked, onChange = _a.onChange, label = _a.label, useSpaceAfter = _a.useSpaceAfter, useSpaceBelow = _a.useSpaceBelow, _b = _a.isMandatory, isMandatory = _b === void 0 ? false : _b, _c = _a.mandatoryMessage, mandatoryMessage = _c === void 0 ? '' : _c;
    var event = {
        target: {
            type: 'checkbox',
            checked: !checked,
        },
    };
    return (_jsxs("div", { className: cx('wrapper', { useSpaceAfter: useSpaceAfter, useSpaceBelow: !!useSpaceBelow }), children: [_jsx("input", { id: id, type: "checkbox", onChange: onChange, checked: checked, className: cx('visually-hidden') }), _jsx("div", { className: cx('checkbox-label', { checked: checked, isMandatory: !isMandatory }), onClick: function () { return onChange(event); } }), isMandatory && mandatoryMessage && !checked && (_jsxs("div", { className: cx('mandatory-tooltip'), children: [_jsx("div", { className: "arrow" }), mandatoryMessage] })), label && _jsx("label", { htmlFor: id, children: label })] }));
}
