import { myPages } from "@/constants/routes/myPages"
import { serverClient } from "@/lib/trpc/server"

import MaxWidth from "@/components/MaxWidth"
import Content from "@/components/MyPages/AccountPage/Content"
import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
import Sidebar from "@/components/MyPages/Sidebar"

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

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

export default async function MyPages({
  params,
}: PageArgs<LangParams & { path: string[] }>) {
  const accountPage = await serverClient().contentstack.accountPage.get()

  return (
    <>
      <Breadcrumbs />

      <div className={styles.content}>
        <Sidebar lang={params.lang} />
        <MaxWidth className={styles.blocks} tag="main">
          {accountPage.content.length ? (
            <Content lang={params.lang} content={accountPage.content} />
          ) : (
            <p>No content published</p>
          )}
        </MaxWidth>
      </div>
    </>
  )
}