import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { AnimatePresence, motion } from 'framer-motion';

import { AuthProvider } from '../context/AuthContext';
import Layout from '../components/Layout';
import NotificationToast from '../components/ui/NotificationToast';

export default function App({ Component, pageProps, router }: AppProps) {
  return (
    <div className="font-sans">
      <AuthProvider>
        <Layout>
          <AnimatePresence mode="wait">
            <motion.div
              key={router.pathname}
              initial={{ opacity: 0, y: 8 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -8 }}
              transition={{ duration: 0.2, ease: 'easeOut' }}
              className="flex-1 flex flex-col min-h-0"
            >
              <Component {...pageProps} />
            </motion.div>
          </AnimatePresence>
        </Layout>
      </AuthProvider>
      <NotificationToast />
    </div>
  );
}