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?: FieldError;
  inputRef: React.LegacyRef<HTMLInputElement>;
  [k: string]: any;
}

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

export default FormInput;