import { lazy, useEffect } from 'react'

import config from 'config'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'

const ServerlessNetworking = lazy(() => import('./serverless'))
const DedicatedNetworking = lazy(() => import('./dedicated'))

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

  if (cluster?.computed?.isServerless) {
    return <ServerlessNetworking cluster={cluster} />
  }

  if (cluster?.computed?.isDedicated) {
    return <DedicatedNetworking cluster={cluster} />
  }

  return null
}