"use client"

import { useIntl } from "react-intl"

import { customerService } from "@scandic-hotels/common/constants/routes/customerService"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@scandic-hotels/design-system/Link"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { LanguageSwitcher } from "@/components/LanguageSwitcher"
import useLang from "@/hooks/useLang"
import { routeToScandicWeb } from "@/util"

import { UserMenu } from "../UserMenu"

import styles from "./navigation-menu.module.css"

export function NavigationMenu({ isMobile = false }: { isMobile?: boolean }) {
  const intl = useIntl()
  const lang = useLang()

  return (
    <div
      className={`styles.menuItems ${isMobile ? styles.mobileMenu : styles.desktopMenu}`}
    >
      <Typography
        variant={
          isMobile
            ? "Body/Paragraph/mdRegular"
            : "Body/Supporting text (caption)/smRegular"
        }
      >
        <Link
          href={routeToScandicWeb(customerService)[lang]}
          color={isMobile ? "none" : "white"}
          className={`${styles.menuItem} ${styles.contactLink}`}
        >
          {isMobile ? null : (
            <MaterialIcon icon="call" size={16} color={"CurrentColor"} />
          )}
          {intl.formatMessage({
            id: "common.contactUs",
            defaultMessage: "Contact us",
          })}
        </Link>
      </Typography>

      <LanguageSwitcher currentLanguage={lang} isMobile={isMobile} />

      {!isMobile && <UserMenu isMobile={isMobile} />}
    </div>
  )
}