import type { JSX } from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render(): JSX.Element {
    return (
      <Html lang='es'>
        <Head>
          {/* Google Fonts */}
          <link href='https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap' rel='stylesheet' />
          <link
            href='https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@400;700&display=swap'
            rel='stylesheet'
          />

          {/* Google Analytics */}
          <script async src='https://www.googletagmanager.com/gtag/js?id='></script>
          <script
            dangerouslySetInnerHTML={{
              __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', '');
              `
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
