import { serverClient } from "@/lib/trpc/server"

import EmptyUpcomingStaysBlock from "../EmptyUpcomingStays"
import Header from "../Header"
import StayList from "../StayList"

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

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

export default async function UpcomingStays({ lang }: LangParams) {
  const stays = await serverClient().user.stays.upcoming()

  return (
    <section className={styles.container}>
      <Header
        title="Your upcoming stays."
        subtitle="Excited about your next trip? So are we. Below are your upcoming stays
          with us, complete with all the details you need to make each visit
          perfect. Can't wait to welcome you back, friend!"
      ></Header>
      {stays.length ? (
        <StayList lang={lang} stays={stays} />
      ) : (
        <EmptyUpcomingStaysBlock />
      )}
    </section>
  )
}