import { Link } from "react-feather"

import { myPages } from "@/constants/routes/myPages"
import { serverClient } from "@/lib/trpc/server"

import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

import Avatar from "../Avatar"
import MyPagesMenu from "../MyPagesMenu"
import MyPagesMobileMenu from "../MyPagesMobileMenu"

import styles from "./myPagesMenuWrapper.module.css"

export default async function MyPagesMenuWrapper() {
  const lang = getLang()
  const [intl, myPagesNavigation, user, membership] = await Promise.all([
    getIntl(),
    serverClient().contentstack.myPages.navigation.get(),
    serverClient().user.name(),
    serverClient().user.safeMembershipLevel(),
  ])

  return (
    <>
      {user ? (
        <>
          <MyPagesMenu
            membership={membership}
            navigation={myPagesNavigation}
            user={user}
          />
          <MyPagesMobileMenu
            membership={membership}
            navigation={myPagesNavigation}
            user={user}
          />
        </>
      ) : (
        <Link
          href={myPages[lang]}
          className={styles.loginLink}
          aria-label={intl.formatMessage({ id: "Log in/Join" })}
        >
          <Avatar />
          <span className={styles.userName}>
            {intl.formatMessage({ id: "Log in/Join" })}
          </span>
        </Link>
      )}
    </>
  )
}