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

import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

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

export default async function EmptyUpcomingStaysBlock() {
  const intl = await getIntl()
  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={homeHrefs[env.NODE_ENV][getLang()]}
        className={styles.link}
        color="peach80"
      >
        {intl.formatMessage({ id: "Get inspired" })}
        <ArrowRightIcon color="peach80" />
      </Link>
    </section>
  )
}