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

import { Section } from "@/components/Section"
import { SectionHeader } from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"

import EmptyUpcomingStaysBlock from "../EmptyUpcomingStays"
import NextStayContent from "./NextStayContent"

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

import type { NextStayProps } from "./types"

export default async function NextStay({ title, link }: NextStayProps) {
  const caller = await serverClient()
  const nextStay = await caller.user.stays.next()

  if (!nextStay) {
    return env.NEW_STAYS_ON_MY_PAGES ? <EmptyUpcomingStaysBlock /> : null
  }

  return (
    <Section className={styles.container}>
      {title && <SectionHeader heading={title} link={link} />}
      <NextStayContent nextStay={nextStay} />
      {link && <SectionLink link={link} variant="mobile" />}
    </Section>
  )
}
