import React from 'react'

const CheckBox = ({
  name,
  id,
  title,
  subtitle,
  onChange,
  className,
  state,
}) => {
  const isCheckedClassname = state === true ? 'isChecked' : 'isNotChecked'
  return (
    <div className={`checkbox flex ${isCheckedClassname} ${className}`}>
      <label>
        <input
          name={name}
          id={id}
          type={'checkbox'}
          className={`rc-checkbox-input`}
          checked={state}
          onChange={onChange} />

        <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
          <path d='M2 3.55661V0H0V5.55661H12.4182V3.55661H2Z' transform='translate(3.84906 11.3371) rotate(-45)' fill='white'/>
        </svg>

      </label>
      <div>
        <p onChange={onChange} checked={state}>{title}</p>
        { subtitle === '' ? null : <p>{subtitle}</p> }
      </div>
    </div>
  )
}


export default CheckBox