import '../styles/globals.css';
import NextProgress from 'next-progress';
import { ToastContainer, Slide } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Image from 'next/image';
import { AnimatePresence } from 'framer-motion';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  return (
    <>
      <ToastContainer 
        position='top-center'
        autoClose={5000}
        theme='light'
        closeOnClick={false}
        transition={Slide}
        limit={1}
      />
      <NextProgress color="#D7A30A" options={{
        showSpinner: false,
      }} />
      <AnimatePresence
        mode='sync'
        initial={false}
      >
        <Component {...pageProps} />
      </AnimatePresence>
    </>
  )
}

export default MyApp