import { graphql } from "@/gql";
import { ContactIndexFragment } from "@/gql/graphql";
import { getClient } from "@/app/client";
import { Blocks } from "@/components/blocks/Blocks";
import { PageHeader } from "@/components/general/PageHeader";

const ContactIndexDefinition = graphql(`
  fragment ContactIndex on ContactIndex {
    ... on ContactIndex {
      title
      lead
      body {
        ...Blocks
      }
    }
  }
`);

export default async function Page() {
  const contactQuery = graphql(`
    query contacts {
      contactIndex {
        ... on ContactIndex {
          ...ContactIndex
        }
      }
    }
  `);
  const { data, error } = await getClient().query(contactQuery, {});
  const index = (data?.contactIndex ?? []) as ContactIndexFragment;

  return (
    <main className="site-main" id="main">
      <PageHeader heading={index.title} lead={index.lead} />
      {index.body && <Blocks blocks={index.body} />}
    </main>
  );
}
