import { request } from "@/lib/graphql/request"
import { serverClient } from "@/lib/trpc/server"
import GetBenefitsPage from "@/lib/graphql/Query/BenefitPage.graphql"

import Title from "@/components/MyPages/Title"
import BenefitsBlock from "@/components/MyPages/Blocks/Benefits"

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

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

export default async function BenefitsPage({ params }: PageArgs<LangParams>) {
  const contentResponse = await request<GetBenefitsPageData>(GetBenefitsPage, {
    locale: params.lang,
    url: "/my-pages/benefits",
  })

  const benefitsData = await serverClient().user.get()

  if (!contentResponse.data.all_my_page?.total) {
    console.log("#### DATA ####")
    console.log(contentResponse.data)
    throw new Error("Not found")
  }

  const contentData = contentResponse.data.all_my_page.items[0]

  return (
    <main className={styles.container}>
      <header className={styles.header}>
        <Title level="h2" className={styles.title} uppercase>
          {contentData.title}
        </Title>
        <Title level="h3" className={styles.preamble}>
          {contentData.preamble}
        </Title>
      </header>
      <BenefitsBlock />
    </main>
  )
}