import { AxiomWebVitals } from 'next-axiom'
import { Analytics } from '@vercel/analytics/react';
import { useEffect } from 'react'

import type { AppProps } from 'next/app'

import Layout from '../components/layout';

import '../styles/index.css'
import '../styles/gfm.css'

export default function MyApp({
  Component,
  pageProps,
}) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout ?? ((page) => page)
 
  return (
    <div className="flex flex-col min-h-screen">
      <Layout>
        { getLayout(<Component {...pageProps}/>) }
        <Analytics />
      </Layout>
      <AxiomWebVitals />
    </div>
  )
}