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

import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/MyPages/Title"
import StayCard from "../../Stays/StayCard"
import EmptyUpcomingStaysBlock from "../../Stays/EmptyUpcomingStays"

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({
    perPage: 3,
  })

  return (
    <section className={styles.container}>
      <header className={styles.header}>
        <Title level="h2" as="h5" uppercase>
          Your upcoming stays
        </Title>
        <Link className={styles.link} href="#">
          See all
        </Link>
      </header>
      {stays.length ? (
        <section className={styles.stays}>
          {stays.map((stay) => (
            <StayCard key={stay.uid} stay={stay} lang={lang} />
          ))}
        </section>
      ) : (
        <EmptyUpcomingStaysBlock />
      )}
    </section>
  )
}