import { useEffect } from 'react'

import config from 'config'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { ClusterPageShell } from 'dbaas/screens/ClusterV2/components'

import DiagnosisTabsLayout from './TabsLayout'

interface DiagnosisWrapperProps {
  cluster: SharedCluster
}

const DiagnosisWrapper = ({ cluster, children }: React.PropsWithChildren<DiagnosisWrapperProps>) => {
  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Diagnosis`
  }, [])

  return (
    <ClusterPageShell
      title="Diagnosis"
      wrapperProps={{
        display: 'flex',
        h: '100%',
        sx: {
          flexDirection: 'column'
        }
      }}
      headerProps={{
        sx: {
          flex: 'none'
        }
      }}
      bodyProps={{ sx: { flex: 'auto' } }}
    >
      <DiagnosisTabsLayout cluster={cluster}>{children}</DiagnosisTabsLayout>
    </ClusterPageShell>
  )
}

export default DiagnosisWrapper