import {Fragment} from 'react';
import Head from 'next/head';

export default function MyApp({ Component, pageProps }) {
  const isDevelopment = process.env.NODE_ENV !== 'development';

  return (
    <Fragment>
      <Head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
        <link rel="icon" type="image/png" href="/favicon.png" />
        <title>Rômulo Alves</title>
        {isDevelopment && (
          <script async defer data-domain="romuloalves.dev" src="//analytics.romuloalves.dev/js/plausible.js"></script>
        )}
      </Head>
      <Component {...pageProps} />
      <style global jsx>{`
        * {
          margin: 0;
          padding: 0;
        }
        body {
          font-family: Verdana, sans-serif;
        }
        h3, p {
          line-height: 1.6;
        }
      `}</style>
    </Fragment>
  );
}
