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";

const VenueFragmentDefinition = graphql(`
  fragment Venue on VenuePage {
    __typename
    id
    slug
    title
    body {
      id
      blockType
      field
      ... on RichTextBlock {
        rawValue
        value
      }
    }
    featuredImage {
      url
      width
      height
    }
    showAsBookable
    floor
    preposition
    capabilityAudio
    capabilityAudioVideo
    capabilityBar
    capabilityLighting
    capacityLegal
    capacityStanding
    capacitySitting
  }
`);

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[];

    console.log('data', data)

  return (
    <main className="site-main" id="main">
      <section className="page-header">
        <h1>Lokaler</h1>
        <p>
          Her kan vi presentere lokalene på Chateau Neuf, og eventuelt henvise
          videre til undersiden om <Link href="/utleie">utleie</Link>.
        </p>
      </section>
      <VenueList venues={venues} />
    </main>
  );
}