import { useEffect } from 'react'

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

import Metrics from './Metrics'

interface MetricsWrapperProps {
  cluster: SharedCluster
}

const MetricsWrapper: React.FC<React.PropsWithChildren<MetricsWrapperProps>> = ({ cluster }) => {
  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Metrics`
  }, [])

  return (
    <ClusterPageShell title="Metrics">
      <Metrics cluster={cluster} />
    </ClusterPageShell>
  )
}

export default MetricsWrapper