import { graphql } from "@/gql";
import { AssociationFragment, AssociationIndexFragment } from "@/gql/graphql";
import { getClient } from "@/app/client";
import { AssociationList } from "@/components/associations/AssociationList";
import { Blocks } from "@/components/blocks/Blocks";
import Link from "next/link";
import { PageHeader } from "@/components/general/PageHeader";

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

const AssociationFragmentDefinition = graphql(`
  fragment Association on AssociationPage {
    __typename
    id
    slug
    title
    excerpt
    body {
      ...Blocks
    }
    logo {
      url
      width
      height
    }
    associationType
    websiteUrl
  }
`);

export default async function Page() {
  const allAssociationsQuery = graphql(`
    query allAssociations {
      index: associationIndex {
        ... on AssociationIndex {
          ...AssociationIndex
        }
      }
      associations: pages(contentType: "associations.AssociationPage") {
        ... on AssociationPage {
          ...Association
        }
      }
    }
  `);
  const { data, error } = await getClient().query(allAssociationsQuery, {});
  const associations = (data?.associations ?? []) as AssociationFragment[];
  const index = (data?.index ?? []) as AssociationIndexFragment;

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