import Title from "@/components/Title"
import MaxWidth from "@/components/MaxWidth"

import { serverClient } from "@/lib/trpc/server"
import { LangParams, PageArgs, UriParams } from "@/types/params"
import { notFound } from "next/navigation"

import styles from "./page.module.css"
import Sidebar from "@/components/Loyalty/Sidebar"

export default async function LoyaltyPage({
  params,
  searchParams,
}: PageArgs<LangParams, UriParams>) {
  try {
    if (!searchParams.uri) {
      throw new Error("Bad URI")
    }

    const loyaltyPage = await serverClient().contentstack.loyaltyPage.get({
      uri: searchParams.uri,
      lang: params.lang,
    })

    return (
      <MaxWidth className={styles.content} tag="main">
        <aside>
          {loyaltyPage.sidebar
            ? loyaltyPage.sidebar.map((block, i) => (
                <Sidebar key={i} block={block} />
              ))
            : null}
        </aside>
        <section className={styles.blocks}>
          <Title as="h3">{loyaltyPage.title}</Title>
          <Content content={loyaltyPage.content} />
        </section>
      </MaxWidth>
    )
  } catch (err) {
    return notFound()
  }
}

function Content(content: any) {
  return <></>
}