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

import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
import Grids from "@/components/TempDesignSystem/Grids"

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

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

export default async function SoonestStays({
  title,
  subtitle,
  link,
}: AccountPageComponentProps) {
  const caller = await serverClient()
  const upcomingStays = await caller.user.stays.upcoming({ limit: 3 })
  if (!upcomingStays?.data) {
    return null
  }

  return (
    <SectionContainer>
      <SectionHeader title={title} preamble={subtitle} link={link} />
      {upcomingStays.data.length ? (
        <Grids.Stackable>
          {upcomingStays.data.map((stay) => (
            <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
          ))}
        </Grids.Stackable>
      ) : (
        <EmptyUpcomingStaysBlock />
      )}
      <SectionLink link={link} variant="mobile" />
    </SectionContainer>
  )
}