import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import './Checkbox.scss';
import classNames from 'classnames';
import Icon from '../Icon';
import '../../assets/styles/_colors.scss';
import Typography from '../Typography';
const Checkbox = ({ id, name, label, disabled = false, checked: initialChecked = false, partial = false, onChange, variant, isDefaultHover = false, labelFontSize = 12, }) => {
    const [checked, setChecked] = useState(initialChecked);
    useEffect(() => {
        setChecked(initialChecked);
    }, [initialChecked]);
    return (_jsxs("label", { className: "ff-checkbox--overlay", htmlFor: id, children: [_jsx("input", { type: "checkbox", className: "ff-checkbox-input", id: id, name: name, checked: checked, onChange: onChange, disabled: disabled }), _jsx("span", { className: classNames('ff-checkbox-custom', {
                    'ff-checkbox-checked': checked,
                    'ff-storybook-checkbox--partial': partial && !checked,
                    [`ff-checkbox--${variant}`]: variant,
                    [`ff-checkbox-checked--${variant}`]: checked && variant,
                    'ff-checkbox-hover-shadow': isDefaultHover,
                    'ff-checkbox-disabled': disabled,
                }), children: checked && (_jsx(Icon, { name: "tick", color: "var(--primary-icon-color)", className: "ff-tick-icon" })) }), label && _jsx(Typography, { as: "span", fontSize: labelFontSize, children: label })] }));
};
export default Checkbox;
//# sourceMappingURL=Checkbox.js.map