import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import { env } from "@/env/server"

import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { getCurrentWebUrl } from "@/utils/url"

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

export default async function EmptyUpcomingStaysBlock() {
  const intl = await getIntl()
  const lang = getLang()
  const baseUrl = env.PUBLIC_URL || "https://www.scandichotels.com"

  const href = env.HIDE_FOR_NEXT_RELEASE
    ? getCurrentWebUrl({ path: "/", lang, baseUrl })
    : `/${lang}`

  return (
    <section className={styles.container}>
      <div className={styles.titleContainer}>
        <Title
          as="h4"
          level="h3"
          color="red"
          className={styles.title}
          textAlign="center"
        >
          {intl.formatMessage({
            defaultMessage: "You have no upcoming stays.",
          })}
          <span className={styles.burgundyTitle}>
            {intl.formatMessage({
              defaultMessage: "Where should you go next?",
            })}
          </span>
        </Title>
      </div>
      <Link href={href} className={styles.link} color="peach80">
        {intl.formatMessage({
          defaultMessage: "Get inspired",
        })}
        <MaterialIcon icon="arrow_forward" color="CurrentColor" />
      </Link>
    </section>
  )
}