import { Box } from '@tidbcloud/uikit'
import { useEffect } from 'react'

import config from 'config'
import { useSharedTiDBContext } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'
import { TiDBPageShell } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/TiDBPageShell'

import DiagnosisTabsLayout from './TabsLayout'

const Diagnosis = ({ children }: React.PropsWithChildren) => {
  const tidb = useSharedTiDBContext()

  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Diagnosis`
  }, [])

  return (
    <Box h="100%" data-testid="premium-diagnosis-page">
      <TiDBPageShell
        title="Diagnosis"
        wrapperProps={{
          display: 'flex',
          h: '100%',
          sx: { flexDirection: 'column' }
        }}
        headerProps={{ sx: { flex: 'none' } }}
        bodyProps={{ sx: { flex: 'auto' } }}
      >
        <DiagnosisTabsLayout tidb={tidb}>{children}</DiagnosisTabsLayout>
      </TiDBPageShell>
    </Box>
  )
}

export default Diagnosis