import React, { useRef } from 'react';
import Icon from 'components/common/Icon';
import Check from 'assets/check.svg';
import styles from './Checkbox.module.css';

export default function Checkbox({ name, value, label, onChange }) {
  const ref = useRef();

  return (
    <div className={styles.container}>
      <div className={styles.checkbox} onClick={() => ref.current.click()}>
        {value && <Icon icon={<Check />} size="small" />}
      </div>
      <label className={styles.label} htmlFor={name}>
        {label}
      </label>
      <input
        ref={ref}
        className={styles.input}
        type="checkbox"
        name={name}
        value={value}
        onChange={onChange}
      />
    </div>
  );
}