import { gql } from "@apollo/client";
import { getClient } from "@/app/client";

export async function generateStaticParams() {
  const query = gql(`
  {
    pages(contentType: "events.EventPage") {
      id
      slug
    }
  }
   `);
  const { data } = await getClient().query({
    query: query,
  });

  return data.pages.map((page: any) => ({
    slug: page.slug,
  }));
}

export default async function Page({ params }: { params: { slug: string } }) {
  const query = gql(`
  query ($slug: String!) {
    event: page(contentType: "events.EventPage", slug: $slug) {
      id
      slug
      title
      ... on EventPage {
        body {
          id
          blockType
        }
      }
    }
  }
   `);

  //   const response = await getClient()
  //     .query({
  //       query: query,
  //       variables: { slug: params.slug },
  //     })
  //     .then()
  //     .catch((e) => console.error(e.networkError.result.errors));

  const { data } = await getClient().query({
    query: query,
    variables: { slug: params.slug },
  });

  const { event } = data;

  return (
    <main className="site-main" id="main">
      <section className="page-header textOnly">
        <h1>Et enkeltarrangement</h1>
        <p>!!</p>
      </section>
      <section className="page-content">
        <div key={event.id}>{event.title}</div>
      </section>
    </main>
  );
}