import * as React from 'react';
import { FormProvider as Form } from 'react-hook-form';

import { IFormProviderProps } from '../types';

/**
 * @description {FormProvider} - A component that wraps the provided children with a Form component and a form element, and handles form submission.
 * @param {FormProviderProps} children - The children components to be wrapped by the FormProvider.
 * @param {Function} onSubmit - The function to be called when the form is submitted.
 * @param {FormProviderProps} methods - The form methods to be passed to the Form component.
 * @return {JSX.Element} The wrapped form element with the provided children.
 */
export const FormProvider = ({ children, onSubmit, methods }: IFormProviderProps) => (
  <Form {...methods}>
    <form onSubmit={onSubmit}>{children}</form>
  </Form>
);