import React from "react"
import * as styles from "./index.module.scss"
import MenuLink from "@/components/header/menu/menu-link"
import TiDBIcon from "@/images/tidb-icon.svg"

interface IProps {
  menuData: IMenuItem
}

const LogoMenu: React.FC<IProps> = ({ menuData }) => {
  const chaosMatrix = menuData.submenu?.find(x => x.name === "ChaosMatrix")
  return (
    <div className={styles.logoMenu}>
      <h5>
        <MenuLink link={"/product"}>
          <img src={TiDBIcon} alt="TiDB logo" />
        </MenuLink>
      </h5>
      <ul>
        {menuData.submenu
          ?.filter(x => x.name !== "ChaosMatrix")
          ?.map(x => {
            return (
              <li key={x.name}>
                <MenuLink link={x.link}>{x.name}</MenuLink>
              </li>
            )
          })}

        <li className={styles.line} />

        {!!chaosMatrix && (
          <li className={styles.chao}>
            <MenuLink link={chaosMatrix.link}>ChaosMatrix</MenuLink>
            <p className={styles.tips}>敬请期待</p>
          </li>
        )}
      </ul>
    </div>
  )
}

export default LogoMenu