---
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
import { z } from "astro/zod";
import SponsorCard from "~/components/SponsorCard.astro";
import { zodFetch } from "~/utils/fetch";
import { OpenCollectiveAccountSchema } from "~/utils/types";

const sponsorResponse = await zodFetch(
  z.object({
    data: z.object({
      account: OpenCollectiveAccountSchema,
    }),
  }),
  "Failed to fetch sponsors",
  "https://opencollective.com/api/graphql/v2",
  {
    body: JSON.stringify({
      operationName: "BannerTopContributors",
      variables: {
        collectiveSlug: "sern",
      },
      query:
        "query BannerTopContributors($collectiveSlug: String!) {\n  account(slug: $collectiveSlug, throwIfMissing: false) {\n    id\n    currency\n    slug\n    ... on AccountWithContributions {\n      contributors(limit: 150) {\n        totalCount\n        nodes {\n          id\n          name\n          roles\n          isAdmin\n          isCore\n          isBacker\n          since\n          image\n          description\n          collectiveSlug\n          totalAmountDonated\n          type\n          publicMessage\n          isIncognito\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n}",
    }),
    method: "POST",
    headers: {
      "content-type": "application/json",
    },
  },
);

if (!sponsorResponse.ok) {
  return console.error(sponsorResponse.error);
}

const sponsors = sponsorResponse.value.data.account.contributors.nodes.filter(
  (s) => s.totalAmountDonated > 0,
);
---

<StarlightPage frontmatter={{ title: "Sponsors", template: "splash" }}>
  <p class="text-lg">
    These amazing people help us keep the project alive. A big thanks from the
    team!
  </p>
  <div class="not-content grid grid-cols-2 gap-4 md:grid-cols-5">
    {sponsors.map((sponsor) => <SponsorCard {...sponsor} />)}
  </div>
</StarlightPage>
