import React from 'react'

const CheckBox = ({
  name,
  id,
  title,
  subtitle,
  onChange,
  className,
  state,
  children,
  childContainerClassname,
  disabled
}) => {

  const isCheckedClassname = state === true
    ? 'cb-on'
    : 'cb-off';


  return (
    <div className={`cb flex items-center ${isCheckedClassname} ${className}`}>
      <label className={'s-6 m-0 mr-4 rel outline-blue'}>

        <input
          disabled={ disabled }
          name={name}
          id={id}
          type={'checkbox'}
          className={'none'}
          checked={state}
          onChange={onChange} />

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

      </label>
      <div className={`user-select-none ${childContainerClassname} mt-1`}>
        { children }
      </div>
    </div>
  )
}


export default CheckBox