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"

import { TopMenuProps } from "@/types/components/header/topMenu"

export default async function TopMenu({ languageUrls }: TopMenuProps) {
  const intl = await getIntl()

  return (
    <div className={styles.topMenu}>
      <div className={styles.content}>
        <HeaderLink href="#">
          <GiftIcon width={20} height={20} color="burgundy" />
          {intl.formatMessage({ id: "Join Scandic Friends" })}
        </HeaderLink>
        <div className={styles.right}>
          <LanguageSwitcher urls={languageUrls} />
          <HeaderLink href="#">
            <SearchIcon width={20} height={20} color="burgundy" />
            {intl.formatMessage({ id: "Find booking" })}
          </HeaderLink>
        </div>
      </div>
    </div>
  )
}