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

import { extendedUser } from "./_constants"

import MaxWidth from "@/components/MaxWidth"
import Overview from "@/components/MyPages/Blocks/Overview"
import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
import UpcomingStays from "@/components/MyPages/Blocks/UpcomingStays"

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

import type { LangParams, PageArgs } from "@/types/params"

export default async function MyPage({ params }: PageArgs<LangParams>) {
  const data = await serverClient().user.get()
  const user = {
    ...data,
    ...extendedUser,
  }
  return (
    <MaxWidth className={styles.blocks} tag="main">
      <Overview user={user} />
      <UpcomingStays lang={params.lang} stays={user.stays} />
      <Shortcuts
        shortcuts={user.shortcuts}
        title="Handy Shortcuts"
        subtitle="The community at your fingertips"
      />
    </MaxWidth>
  )
}
