import { useState } from "react";
import { BrowserRouter as Router, Route, Link, Routes } from "react-router-dom";
import { Home, Profile, Gallery, Opinions, Links } from "./pages";

export default function App() {
  const [darkMode, setDarkMode] = useState(true);

  return (
    <Router>
      <div className={`min-h-screen ${darkMode ? "bg-gray-900 text-white" : "bg-white text-black"}`}>
        <header className="p-4 flex justify-between items-center bg-gray-800 text-white">
          <h1 className="text-xl font-bold">My Blog</h1>
          <nav>
            <ul className="flex gap-4">
              <li><Link to="/profile">Profile</Link></li>
              <li><Link to="/gallery">Gallery</Link></li>
              <li><Link to="/opinions">Opinions</Link></li>
              <li><Link to="/links">Links</Link></li>
            </ul>
          </nav>
          <button onClick={() => setDarkMode(!darkMode)} className="p-2 bg-gray-700 rounded">
            {darkMode ? "☀️" : "🌙"}
          </button>
        </header>
        <main className="p-4">
          <Routes>
            <Route path="/profile" element={<Profile />} />
            <Route path="/gallery" element={<Gallery />} />
            <Route path="/opinions" element={<Opinions />} />
            <Route path="/links" element={<Links />} />
            <Route path="/" element={<Home />} />
          </Routes>
        </main>
      </div>
    </Router>
  );
}