import Link from "next/link"

import Title from "@/components/MyPages/Title"
import Button from "@/components/TempDesignSystem/Button"

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

export default function EmptyUpcomingStaysBlock() {
  return (
    <section className={styles.container}>
      <Title level="h3" as="h5" uppercase>
        You have no upcoming stays.
        <span className={styles.redTitle}> Where should you go next?</span>
      </Title>
      <Button
        intent={"primary"}
        className={styles.button}
        asChild
        type="button"
      >
        <Link className={styles.link} href={"#"} key={"getInspired"}>
          Get inspired
        </Link>
      </Button>
    </section>
  )
}
