import { notFound } from "next/navigation"
import { serverClient } from "@/lib/trpc/server"

import MaxWidth from "@/components/MaxWidth"
import Sidebar from "@/components/Loyalty/Sidebar"
import { Blocks } from "@/components/Loyalty/Blocks"

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

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

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}>
          <Blocks blocks={loyaltyPage.blocks} />
        </section>
      </MaxWidth>
    )
  } catch (err) {
    return notFound()
  }
}