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 baseUrl = myPages[params.lang].replace(`/${params.lang}`, "")
  const pathUrl = params.path.join("/")

  const accountPage = await serverClient().contentstack.accountPage.get({
    url: `${baseUrl}/${pathUrl}`,
    lang: params.lang,
  })

  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
    href: `${baseUrl}/${pathUrl}`,
    locale: params.lang,
  })

  return (
    <>
      <Breadcrumbs breadcrumbs={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>
    </>
  )
}