/* eslint-disable jsx-a11y/label-has-for */
import React, { ReactNode } from 'react';
import CheckSmall from '../icons/CheckSmall';
import CloseSmall from '../icons/CloseSmall';

interface CheckboxProps {
  label?: string;
  htmlFor: string;
  children: ReactNode;
  isChecked?: boolean;
  error?: boolean;
  errorMessage?: string;
}

const Checkbox: React.FC<CheckboxProps> = ({
  label,
  htmlFor,
  children,
  isChecked,
  error,
  errorMessage,
}) => {
  return (
    <label
      className={`checkbox${isChecked ? ' checked' : ''}`}
      htmlFor={htmlFor}
    >
      <div className="inputWrapper">
        {children}
        <span className="label">{label}</span>
        <span className="checkWrapper">
          <CheckSmall className=" check" />
        </span>
      </div>
      {error ? (
        <div className="error">
          <div className="validationIcon bad">
            <CloseSmall />
          </div>
          <span className="errorMessage" data-testid={`${htmlFor}-error`}>
            {errorMessage}
          </span>
        </div>
      ) : null}
    </label>
  );
};

export default Checkbox;