  // Import css
  import 'assets/css/bootstrap.min.css';
  import 'assets/css/materialdesignicons.min.css';
  import 'assets/css/pe-icon-7-stroke.css';
  import 'assets/css/style.css';
  
  import Layout from '../layouts/Landing';
  import Head from 'next/head';
  import { useEffect, useState } from 'react';
  import Switcher from 'components/Footer/Switcher';
  
  const MyApp = ({ Component, pageProps }) => {

    const [themeColor, setThemeColor] = useState('red'); // Default color
  
    useEffect(() => {
      // Update the theme link href whenever themeColor changes
      const themeLink = document.getElementById("colorTheme");
      if (themeLink) {
        themeLink.href = `/assets/css/colors/${themeColor}.css?v=${new Date().getTime()}`;
      }
    }, [themeColor]);

    return (
      <>
        <Head>
          <title>Dorsin - React Next js Responsive Landing Page Template</title>
          <meta name="viewport" content="initial-scale=1.0, width=device-width" />
          <link id="colorTheme" rel="stylesheet" href={`/assets/css/colors/${themeColor}.css`} />
        </Head>
        <Layout>
          <Switcher setThemeColor={setThemeColor} />
          <Component {...pageProps} />
        </Layout>
      </>
    )
  }
  
  export default MyApp