import type { AppProps } from "next/app";
import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client";
import Cookies from "js-cookie";

import MainLayout from "../layouts/main";
import "../styles/globals.css";
import * as cookieNames from "../lib/cookieNames";

const token = Cookies.get(cookieNames.TOKEN);

const client = new ApolloClient({
  uri: "/graphql",
  cache: new InMemoryCache(),
  headers: token ? { authorization: `Bearer ${token}` } : {},
});

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  return (
    <ApolloProvider client={client}>
      <MainLayout>
        <Component {...pageProps} />
      </MainLayout>
    </ApolloProvider>
  );
}

export default MyApp;