import { PageShellBase } from '@tidbcloud/uikit/biz'

import { TidbCreationHeader } from 'dbaas/screens/NextGen/my-tidb-creation/layout/TidbCreationHeader'
import { TwoPaneLayout } from 'dbaas/screens/NextGen/my-tidb-creation/layout/TwoPaneLayout'

interface RestoreLayoutProps {
  title: string
  rightSection: React.ReactNode
}

export function RestoreLayout({ children, rightSection, title }: React.PropsWithChildren<RestoreLayoutProps>) {
  return (
    <PageShellBase.Root
      sx={{
        backgroundColor: 'var(--mantine-color-carbon-1)',
        height: '100%',
        overflow: 'hidden'
      }}
    >
      <TwoPaneLayout visible header={<TidbCreationHeader title={title} />} rightSection={rightSection}>
        {children}
      </TwoPaneLayout>
    </PageShellBase.Root>
  )
}