import { Outlet, useLocation } from 'react-router-dom';
import { AnimatePresence, motion } from 'framer-motion';
import { TabBar } from './TabBar';
import styles from './AppLayout.module.css';

export function AppLayout() {
  const location = useLocation();

  return (
    <div className={styles.layout}>
      <main className={styles.main}>
        <AnimatePresence>
          <motion.div
            key={location.pathname}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.12 }}
          >
            <Outlet />
          </motion.div>
        </AnimatePresence>
      </main>
      <TabBar />
    </div>
  );
}
