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

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 href = env.HIDE_FOR_NEXT_RELEASE
    ? getCurrentWebUrl("/", lang)
    : `/${lang}`

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