import { graphql } from "@/gql";
import { VenueFragment } from "@/gql/graphql";
import { getClient } from "@/app/client";
import { VenueList } from "@/components/venues/VenueList";
import Link from "next/link";
import { PageHeader } from "@/components/general/PageHeader";
import { BgPig } from "@/components/general/BgPig";

export default async function Page() {
  const allVenuesQuery = graphql(`
    query allVenues {
      venues: pages(contentType: "venues.VenuePage") {
        ... on VenuePage {
          ...Venue
        }
      }
    }
  `);
  const { data, error } = await getClient().query(allVenuesQuery, {});
  const venues = (data?.venues ?? []) as VenueFragment[];

  return (
    <main className="site-main" id="main">
      <PageHeader heading="Utleie" />
      <VenueList venues={venues} />
      <BgPig type="key" />
    </main>
  );
}