import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Header } from './components/layout/Header';
import { Suspense, lazy } from 'react';
import Footer from './components/Footer';

// Lazy load pages
const Home = lazy(() => import('./pages/Home'));
const Daily = lazy(() => import('./pages/Daily'));
const Article = lazy(() => import('./pages/Article'));

function App() {
  return (
    <BrowserRouter>
      <div className="flex flex-col min-h-screen bg-white dark:bg-neutral-900 text-gray-900 dark:text-gray-100">
        <Header />
        {/* 页眉分隔线 */}
        <div className="w-[95%] mx-auto">
          <div className="border-t-2 border-gray-900 dark:border-gray-100 w-full mb-2" />
        </div>
        
        <main className="flex-1 w-[95%] mx-auto py-8">
          <Suspense fallback={<div>Loading...</div>}>
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/daily" element={<Daily />} />
              <Route path="/posts/:articleId" element={<Article />} />
            </Routes>
          </Suspense>
        </main>

        <Footer />
      </div>
    </BrowserRouter>
  );
}

export default App;