import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import classNames from '../../_virtual/index.js';
import Icon from '../Icon/Icon.js';
import Typography from '../Typography/Typography.js';

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"
      })
    }), jsx(Typography, {
      as: "span",
      fontSize: labelFontSize,
      children: label
    })]
  });
};

export { Checkbox as default };
//# sourceMappingURL=Checkbox.js.map
