import React from 'react';
import InputFieldErrorMessage from '../InputFieldErrorMessage';
import { InputFieldGroupWrapper } from './styles';

type InputFieldGroupProps = {
  width?: number;
  fullWidth?: boolean;
  errors: { [k: string]: string | undefined };
};

const InputFieldGroup: React.FC<InputFieldGroupProps> = ({
  errors,
  width,
  fullWidth,
  children,
}) => {
  const errorMessage = Object.values(errors)!.reduce(
    (prev, cur) => prev || cur,
    undefined
  );
  return (
    <InputFieldGroupWrapper width={width} fullWidth={fullWidth}>
      {children}
      {errorMessage && <InputFieldErrorMessage message={errorMessage} />}
    </InputFieldGroupWrapper>
  );
};

export default InputFieldGroup;