import { observer } from 'mobx-react'

import { useAccessCheck } from 'dbaas/contexts/access-control'
import { AccessDeniedView } from 'dbaas/contexts/access-control/ui/AccessDeniedView'
import { TiDBPageShell } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/TiDBPageShell'

import BYOCOpsAuditLog from './configurations/BYOCOpsAuditLog'

export const RegionSettings = observer(() => {
  const accessible = useAccessCheck('OrgAuditGate')

  return (
    <TiDBPageShell title="Region Settings">
      {accessible ? <BYOCOpsAuditLog regionSettingsView /> : <AccessDeniedView />}
    </TiDBPageShell>
  )
})

export default RegionSettings