import React from "react"

import { CustomLink } from "@/components"
import TiDBIcon from "@/images/tidb-icon.svg"
import * as styles from "./index.module.scss"
import { getLinkWithPathPrefix } from "@/utils"

type IProps = {
  data: IMenuItem
}

export const MobileMenuItem = ({ data }: IProps) => {
  const { link, name, type, submenu } = data
  const chaosMatrix = submenu?.find(x => x.name === "ChaosMatrix")
  return (
    <div className={styles.mobileMenuItem}>
      <CustomLink
        linkTo={link ? getLinkWithPathPrefix(link) : "/product"}
        className={styles.link}
      >
        {type === "logo" ? (
          <img src={TiDBIcon} alt="TiDB logo" className={styles.tidbLogo} />
        ) : (
          name
        )}
      </CustomLink>
      {chaosMatrix ? (
        <div className={styles.chaosMatrix}>
          <span>ChaosMatrix</span>
          <span className={styles.tips}>敬请期待</span>
        </div>
      ) : null}
    </div>
  )
}

export default MobileMenuItem