import * as React from 'react';
import { FormFieldAlerts, FormFieldInput, FormFieldLabel } from '.';

interface IFormFieldProps {
    children?: any;
    input: JSX.Element | string | Array<JSX.Element | string>;
    label: string | JSX.Element | Array<string | JSX.Element>;
    error?: any;
    warning?: any;
    info?: any;
}

export const FormField = ({ label, children, input, error, warning, info, ...rest }: IFormFieldProps) => (
    <div {...rest}>
        <FormFieldLabel>
            {label}
        </FormFieldLabel>

        <FormFieldInput input={input} />

        <FormFieldAlerts
            error={error}
            warning={warning}
            info={info}
        />

        {children}
    </div>
);