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

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

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

import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"

export default async function UpcomingStays({
  lang,
  title,
  subtitle,
  link,
}: AccountPageComponentProps) {
  const stays = await serverClient().user.stays.soonestUpcoming()

  return (
    <section className={styles.container}>
      <Header title={title} subtitle={subtitle} link={link}></Header>
      {stays.length ? (
        <StayList lang={lang} stays={stays} />
      ) : (
        <EmptyUpcomingStaysBlock />
      )}
    </section>
  )
}