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 { 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='wait' 
        initial={false} 
        onExitComplete={() => window.scrollTo(0, 0)}
      >
        <Component {...pageProps} key={router.asPath} />
      </AnimatePresence>
    </>
  )
}

export default MyApp