import { Spinner } from '@heroui/spinner'
import { AnimatePresence, motion } from 'motion/react'
import { Suspense } from 'react'
import { Outlet, useLocation } from 'react-router-dom'

import DefaultLayout from '@/layouts/default'

export default function IndexPage() {
  const location = useLocation()

  return (
    <DefaultLayout>
      <Suspense
        fallback={
          <div className="flex justify-center px-10">
            <Spinner />
          </div>
        }
      >
        <AnimatePresence mode="wait">
          <motion.div
            key={location.pathname}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{
              type: 'tween',
              ease: 'easeInOut'
            }}
          >
            <Outlet />
          </motion.div>
        </AnimatePresence>
      </Suspense>
    </DefaultLayout>
  )
}