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

import MaxWidth from "@/components/MaxWidth"
import CardGrid from "@/components/TempDesignSystem/CardGrid"

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

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

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

export default async function SoonestStays({
  lang,
  title,
  subtitle,
  link,
}: AccountPageComponentProps) {
  const { data: stays } = await serverClient().user.stays.upcoming({ limit: 3 })

  return (
    <section className={styles.container}>
      <Header title={title} subtitle={subtitle} link={link} />
      {stays.length ? (
        <CardGrid>
          {stays.map((stay) => (
            <StayCard
              key={stay.attributes.confirmationNumber}
              lang={lang}
              stay={stay}
            />
          ))}
        </CardGrid>
      ) : (
        <EmptyUpcomingStaysBlock />
      )}
    </section>
  )
}