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

interface FieldProps {
  label?: string;
  htmlFor: string;
  children: ReactNode;
  className?: string;
  disabled?: boolean;
  checked?: boolean;
  error?: boolean;
  errorMessage?: string;
  vertical?: boolean;
}

const Field: React.FC<FieldProps> = ({
  label,
  htmlFor,
  children,
  className,
  disabled,
  checked,
  error,
  errorMessage,
  vertical,
}) => {
  return (
    <label
      className={`field${disabled ? ' disabled' : ''}${
        vertical ? ' vertical' : ''
      }${error ? ' error ' : ' '}${className || ''}`}
      htmlFor={htmlFor}
    >
      <span className="label">{label}</span>
      <div className="inputWrapper">
        {children}
        {error ? (
          <div className="validationIcon bad">
            <CloseSmall />
          </div>
        ) : null}
        {checked ? (
          <div className="validationIcon good">
            <CheckSmall />
          </div>
        ) : null}
        {error ? (
          <span className="errorMessage" data-testid={`${htmlFor}-error`}>
            {errorMessage}
          </span>
        ) : null}
      </div>
    </label>
  );
};

export default Field;