import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { CheckBoxWrap } from './CheckBoxWrap';
import iconTick from '@/assets/icon/tick_black_thin.svg';

export interface CheckBoxProps {
  label: string;
  defaultChecked: boolean;
  onClick: React.MouseEventHandler<HTMLElement>;
}

const CheckBox: React.FC<CheckBoxProps> = ({
  label,
  defaultChecked,
  onClick,
}) => {
  const { t } = useTranslation();
  const [checked, setChecked] = useState(defaultChecked);
  return (
    <CheckBoxWrap>
      <div
        className="checkBoxContainer"
        onClick={e => {
          onClick(e);
          setChecked(checked => !checked);
        }}
      >
        <div className="checkBox">{checked && <img src={iconTick} />}</div>
        <span className="labelSpan">{t(label)}</span>
      </div>
    </CheckBoxWrap>
  );
};

export default CheckBox;
