import React from 'react';
import { Form, Formik } from 'formik/dist/index';
import { CustomButton } from 'components/button/custom-button';
import { Error } from 'components/form/error';

interface FormikComponentProps {
  initialValues: any;
  onSubmit: any;
  children: any;
  api: string;
  submitLabel?: string;
  errors?: any;
  customError?: string;
}

export const FormikComponent: React.FC<FormikComponentProps> = ({
  initialValues,
  onSubmit,
  children,
  api,
  submitLabel = 'Odeslat formular',
  customError,
}) => {
  return (
    <Formik initialValues={initialValues} onSubmit={onSubmit}>
      {props => (
        <Form style={{ display: 'flex', flexDirection: 'column' }}>
          {children}
          {customError && <Error>{customError}</Error>}
          <CustomButton
            label={submitLabel}
            type="submit"
            variant="contained"
            size="large"
            color="primary"
          />
        </Form>
      )}
    </Formik>
  );
};
