import React from 'react';
import s from './forminput.scss';
import { Form } from 'semantic-ui-react';
import { FieldError } from 'react-hook-form';

interface IProps {
  label?: string;
  inline?: boolean;
  error?: Error | FieldError;
  className?: string;
  children: JSX.Element;
}

const FormCustom = ({
  label = '',
  inline = false,
  error,
  className = '',
  children,
}: IProps): JSX.Element => {
  return (
    <Form.Field
      className={`${s.formField} ${inline ? s.inline : ''} ${className}`}
      inline={inline}
      error={!!error}
    >
      {label && <label>{label}</label>}
      {children}
      {!!error && <div className={s.errorMessage}>{error.message}</div>}
    </Form.Field>
  );
};

export default FormCustom;