import { useEffect } from 'react'

import config from 'config'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import ChangefeedList, { ChangefeedListHeader } from 'dbaas/screens/Changefeed/ChangefeedList'
import ChangefeedListEssential from 'dbaas/screens/Changefeed/ChangefeedListEssential'
import { ClusterPageShell } from 'dbaas/screens/ClusterV2/components'

const CDCHome = ({ cluster }: { cluster: SharedCluster }) => {
  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Changefeed`
  }, [])

  if (cluster.computed.isEssential) {
    return <ChangefeedListEssential cluster={cluster} />
  }

  return (
    <ClusterPageShell
      headerProps={{
        rightSection: <ChangefeedListHeader cluster={cluster} />
      }}
      bodyProps={{ px: 0 }}
      title="Changefeed"
    >
      <ChangefeedList cluster={cluster} />
    </ClusterPageShell>
  )
}

export default CDCHome