import { motion } from 'framer-motion'
import { Outlet } from 'react-router-dom'
import { Header } from './Header'
import { Footer } from './Footer'
import { useEffect } from 'react'
import { env } from '@web/src/env'

export function MainLayout() {
    useEffect(() => {
        document.title = env.APP_NAME || '信箱'
    }, [])
    return (
        <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5 }}
        >
            {/* 顶部 Header */}
            <Header />

            {/* 主要内容区域 */}
            <main className="min-h-screen bg-slate-50">
                <div className=" mx-auto px-4 py-8">
                    <Outlet />
                </div>
            </main>

            {/* 底部 Footer */}
            <Footer />
        </motion.div>
    )
}
