import { DashboardOutlined, GlobalOutlined } from '@ant-design/icons'
import { Menu, Typography } from 'antd'
import { useNavigate, useLocation } from 'react-router-dom'
import { useTranslation } from 'react-i18next'

export default function Sidebar() {
  const { t } = useTranslation()
  const navigate = useNavigate()
  const location = useLocation()

  const items = [
    { key: '/dashboard', icon: <DashboardOutlined />, label: t('nav.dashboard') },
    { key: '/domains', icon: <GlobalOutlined />, label: t('nav.domains') },
  ]

  return (
    <div>
      <Typography.Title level={4} style={{ color: '#fff', padding: '16px', margin: 0 }}>
        {t('app.title')}
      </Typography.Title>
      <Menu
        theme="dark"
        mode="inline"
        selectedKeys={[location.pathname]}
        items={items}
        onClick={(e) => navigate(e.key)}
      />
    </div>
  )
}