/* eslint-disable react/prop-types */

import classNames from 'classnames';

function FormCheckbox({ field, form, ...props }) {
  const id = props.id || field.name;
  const error = form.errors[field.name];
  const touched = form.touched[field.name];

  return (
    <div className={props.className}>
      <input
        {...props}
        {...field}
        id={id}
        type='checkbox'
        checked={field.value}
        className='form-checkbox m-2'
      />
      <label
        htmlFor={id}
        className={classNames({
          'after:mx-1 after:text-red-500 after:content-["*"]': props.required
        })}
      >
        {props.label}
      </label>
      {error && touched && <div className='mt-1 px-2 text-sm text-red-400'>{error}</div>}
    </div>
  );
}

export default FormCheckbox;
