import { Page, PageProps } from '@wix/design-system';
import React, { Children, ReactNode } from 'react';
import { FormPageProvider } from './FormPageProvider';
import { FormPageState } from '@wix/bex-core';

export interface FormPageProps extends PageProps {
  state?: FormPageState;
  children: ReactNode;
}

const FormPageContent = ({ children, ...rest }: FormPageProps) => {
  // WSR <Page /> expects a flattened children array
  const childrenArr = Children.toArray(children);

  return <Page {...rest}>{childrenArr}</Page>;
};

export function FormPage({ state, ...rest }: FormPageProps) {
  return (
    <FormPageProvider state={state}>
      <FormPageContent {...rest} />
    </FormPageProvider>
  );
}