import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { CheckBoxWrap } from "./CheckBoxWrap";
import iconTick from "../../../styles/assets/icon/tick_black_thin.svg";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var CheckBox = function CheckBox(_ref) {
  var label = _ref.label,
    defaultChecked = _ref.defaultChecked,
    _onClick = _ref.onClick;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var _useState = useState(defaultChecked),
    _useState2 = _slicedToArray(_useState, 2),
    checked = _useState2[0],
    setChecked = _useState2[1];
  return /*#__PURE__*/_jsx(CheckBoxWrap, {
    children: /*#__PURE__*/_jsxs("div", {
      className: "checkBoxContainer",
      onClick: function onClick(e) {
        _onClick(e);
        setChecked(function (checked) {
          return !checked;
        });
      },
      children: [/*#__PURE__*/_jsx("div", {
        className: "checkBox",
        children: checked && /*#__PURE__*/_jsx("img", {
          src: iconTick
        })
      }), /*#__PURE__*/_jsx("span", {
        className: "labelSpan",
        children: t(label)
      })]
    })
  });
};
export default CheckBox;