/* 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 hasError = error && form.touched[field.name];

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

export default FormCheckbox;
