/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable @typescript-eslint/naming-convention */
import React, { useEffect } from 'react';
import Head from 'next/head';
import '../public/css/fonts.css';
import '../src/styles/variables.css';
import '../src/styles/reset.css';
import '../src/styles/common-styles.css';
import '../src/styles/interactive.css';
import '../src/styles/forms.css';
import '../src/styles/header.css';
import '../src/styles/illustration.css';
import '../src/styles/auth.css';
import '../src/styles/rings.css';
import '../src/styles/points.css';
import '../src/styles/home.css';
import '../src/styles/ranking.css';
import '../src/styles/phases.css';
import '../src/styles/profile.css';
import '../src/styles/committee.css';
import '../src/styles/help.css';
import '../src/utils/i18n';

const App = ({ Component, pageProps }): JSX.Element => {
  useEffect(() => {
    const appHeight = (): void => {
      const doc = document.documentElement;
      doc.style.setProperty('--app-height', `${window.innerHeight}px`);
    };
    window.addEventListener('resize', appHeight);
    appHeight();
  });

  return (
    <>
      <Head>
        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href="/apple-touch-icon.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="/favicon-32x32.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="16x16"
          href="/favicon-16x16.png"
        />
        <link rel="manifest" href="/site.webmanifest" />
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2c210b" />
        <meta name="msapplication-TileColor" content="#2c210b" />
        <meta name="theme-color" content="#ffffff" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1"
        />
        <meta httpEquiv="Content-Language" content="es" />
      </Head>
      <Component {...pageProps} />
    </>
  );
};

export default App;
