import '../styles/globals.css';
import NextProgress from 'next-progress';
import { useRouter } from 'next/router';
import { AnimatePresence } from 'framer-motion';
import { Toaster } from "react-hot-toast";

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

  return (
    <>
      <Toaster
        position="top-center"
        toastOptions={{
          duration: 3000,
          className: 'border border-gray_r-8'
        }}
      />
      <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