import { serverClient } from "@/lib/trpc/server"

import { GiftIcon, SearchIcon } from "@/components/Icons"
import LanguageSwitcher from "@/components/LanguageSwitcher"
import { getIntl } from "@/i18n"

import HeaderLink from "../HeaderLink"

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

export default async function TopMenu() {
  const [intl, languages, headerData] = await Promise.all([
    getIntl(),
    serverClient().contentstack.languageSwitcher.get(),
    serverClient().contentstack.base.header(),
  ])

  if (!languages || !headerData) {
    return null
  }

  return (
    <div className={styles.topMenu}>
      <div className={styles.content}>
        {headerData.topLink ? (
          <HeaderLink className={styles.topLink} href={headerData.topLink.href}>
            <GiftIcon width={20} height={20} color="burgundy" />
            {headerData.topLink.title}
          </HeaderLink>
        ) : null}
        <div className={styles.options}>
          <LanguageSwitcher type="desktopHeader" urls={languages.urls} />
          <HeaderLink href="#">
            <SearchIcon width={20} height={20} color="burgundy" />
            {intl.formatMessage({ id: "Find booking" })}
          </HeaderLink>
        </div>
      </div>
    </div>
  )
}