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

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

import { AuditLogs } from '../LogList'

import { FilterRules } from './FilterRules'
import { LogSwitch } from './LogSettings/LogSwitch'

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

  return (
    <Stack gap="xl">
      <LogSwitch cluster={cluster} />

      <FilterRules cluster={cluster} />

      <AuditLogs clusterId={cluster.id} />
    </Stack>
  )
}

export default AuditLog