---
const { menu, lang } = Astro.props
const hasChildren = menu?.children?.length > 0

function getName(item = {}) {
  return (
    item[`categaryName${lang.charAt(0).toUpperCase() + lang.slice(1)}`] ||
    item.categaryNameEn ||
    item.categaryNameZh
  )
}

const list = [
  ['网络安全', '全闪存存储', 'AI计算', '软件平台与服务'],
  // ['智慧园区', '数据中心', '广域网点'],
  // ['金融', '商业市场', '电力', '制造', '医疗', '零售'],
  ['关于华为企业业务'],
]
---

<!-- <li class="nav-item dropdown mx-3">
  <a
    class="nav-link dropdown-toggle"
    aria-current="page"
    data-bs-toggle="dropdown"
    href="/">{menu}</a
  >
  <ul
    class="dropdown-menu bg-light"
    style="--bs-bg-opacity: 0.9; --bs-dropdown-border-width: 0; --bs-dropdown-border-radius: 0; margin-top: 1.2rem"
  >
    {
      list?.map((item) => (
        <li>
          <a class="dropdown-item" href="/">
            {item}
          </a>
        </li>
      ))
    }
  </ul>
</li> -->
<li class={hasChildren ? 'nav-item dropdown mx-3' : 'nav-item mx-3'}>
  <a
    class={hasChildren ? 'nav-link dropdown-toggle' : 'nav-link'}
    aria-current="page"
    data-bs-toggle={hasChildren ? 'dropdown' : ''}
    href="/">{menu?.name}</a
  >
  {
    hasChildren ? (
      <ul
        class="dropdown-menu bg-light"
        style="--bs-bg-opacity: 0.9; --bs-dropdown-border-width: 0; --bs-dropdown-border-radius: 0; margin-top: 1.2rem"
      >
        {menu?.children?.map((item) => (
          <li>
            <a class="dropdown-item" href={`/${lang}/${item.categaryId}`}>
              {item}
            </a>
          </li>
        ))}
      </ul>
    ) : null
  }
</li>
