import { Divider, Paper } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'

import { GetOrgInfoQueryResult } from 'dbaas/services/warehouse'

import { BasicSettingsSection, SizeSettingsSection, SuspendSettingsSection } from './Sections'

interface WarehouseCreateFormProps {
  formId: string
  onSubmit: React.FormEventHandler<HTMLFormElement>
  orgInfo?: GetOrgInfoQueryResult
}

export const WarehouseCreateForm = observer(({ formId, onSubmit, orgInfo }: WarehouseCreateFormProps) => {
  return (
    <Paper component="form" id={formId} onSubmit={onSubmit} withBorder shadow="none">
      <BasicSettingsSection orgInfo={orgInfo} />
      <Divider />
      <SizeSettingsSection />

      <Divider />
      <SuspendSettingsSection />
    </Paper>
  )
})