import Head from 'next/head';
import React from 'react';
import { GetServerSideProps } from 'next';
import { apiClientGet } from '@/lib/apiClient';
import { ApolloQueryResult, gql } from '@apollo/client';
import Link from 'next/link';

type PageData = {
  hello:string;
}

type PageProps = ApolloQueryResult<PageData>

export const getServerSideProps:GetServerSideProps<PageProps> = async () => {
  const client = await apiClientGet();

  const res = await client.query<PageData>({
    query: gql`
      query {
        hello
      }
    `
  });

  return {
    props: res
  };
};

const HomePage: React.FC<PageProps> = props => {
  return (
    <div className="homepage">
      <Head>
        <title>HomePlay, your personal video game library</title>
      </Head>

      <Link href="/game/1/play">
        Play Game
      </Link>
      
      { props.data?.hello }
    </div>
  );
}

export default HomePage;