import React, { PropsWithChildren } from 'react';
import Button from '../Button';
import { FormWrap } from './FormWrap';
import PageLayout, { TabItem } from '@/layout/PageLayout';

interface FormProps {
  width?: string | number;
  title?: string;
  customTopSidebar?: React.ReactNode[];
  topSideBar?: TabItem[];
  nextName?: string;
  cancelName?: string;
}

const Form: React.FC<PropsWithChildren<FormProps>> = ({
  title,
  width,
  customTopSidebar,
  topSideBar,
  nextName = 'next',
  cancelName = 'cancel',
  children,
}) => {
  return (
    <FormWrap width={width || '40%'}>
      <form className="center">
        <div className="formContainer">
          <PageLayout
            title={title}
            width={width || '100%'}
            customTopSidebar={customTopSidebar}
            topbarTabs={topSideBar}
            fix={false}
          />
          {children}
          <div className="formButtonContainer">
            <Button label={nextName} />
            <Button label={cancelName} style={{ marginLeft: 25 }} />
          </div>
        </div>
      </form>
    </FormWrap>
  );
};

export default Form;
