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 styles from "./emptyUpcomingStays.module.css"

import { LangParams } from "@/types/params"

export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
  const { formatMessage } = await getIntl()
  return (
    <section className={styles.container}>
      <Title as="h5" level="h3" color="red">
        {formatMessage({ id: "You have no upcoming stays." })}
        <span className={styles.burgundyTitle}>
          {" "}
          {formatMessage({ id: "Where should you go next?" })}
        </span>
      </Title>
      <Link
        href={homeHrefs[env.NODE_ENV][lang]}
        className={styles.link}
        color="peach80"
      >
        {formatMessage({ id: "Get inspired" })}
        <ArrowRightIcon color="peach80" />
      </Link>
    </section>
  )
}