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

import Header from "@/components/SectionHeader"
import Grids from "@/components/TempDesignSystem/Grids"

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 response = await serverClient().user.stays.upcoming({ limit: 3 })
  if (!response?.data) {
    return null
  }

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