import { Tabs, Typography } from 'antd'
import { useTranslation } from 'react-i18next'

import AddressObjectsTab from './AddressObjects'
import AddressGroupsTab from './AddressGroups'
import ServicesTab from './Services'
import ServiceGroupsTab from './ServiceGroups'
import RulesTab from './Rules'
import NATRulesTab from './NATRules'
import ZonesTab from './Zones'

export default function FirewallPage() {
  const { t } = useTranslation()

  const tabs = [
    { key: 'rules',    label: t('fw.tabs.rules'),    children: <RulesTab /> },
    { key: 'nat',      label: t('fw.tabs.nat'),      children: <NATRulesTab /> },
    { key: 'zones',    label: t('fw.tabs.zones'),    children: <ZonesTab /> },
    { key: 'addrObj',  label: t('fw.tabs.addrObj'),  children: <AddressObjectsTab /> },
    { key: 'addrGrp',  label: t('fw.tabs.addrGrp'),  children: <AddressGroupsTab /> },
    { key: 'services', label: t('fw.tabs.services'), children: <ServicesTab /> },
    { key: 'svcGrp',   label: t('fw.tabs.svcGrp'),   children: <ServiceGroupsTab /> },
  ]

  return (
    <div>
      <Typography.Title level={3}>{t('fw.title')}</Typography.Title>
      <Typography.Paragraph type="secondary">{t('fw.intro')}</Typography.Paragraph>
      <Tabs items={tabs} defaultActiveKey="rules" />
    </div>
  )
}