import { NavLink, Navigate, Route, Routes } from "react-router-dom";
import AlbumsPage from "./pages/AlbumsPage";
import UsersPage from "./pages/UsersPage";
import AlbumTracksPage from "./pages/AlbumTracksPage";

export default function App() {
  return (
    <div className="app">
      <header className="topbar card">
        <h1>Admin Panel</h1>
        <nav className="nav">
          <NavLink to="/albums" className={({ isActive }) => isActive ? "tab active" : "tab"}>
            Albums
          </NavLink>
          <NavLink to="/users" className={({ isActive }) => isActive ? "tab active" : "tab"}>
            Users
          </NavLink>
        </nav>
      </header>

      <main className="content">
        <Routes>
          <Route path="/" element={<Navigate to="/albums" replace />} />
          <Route path="/albums" element={<AlbumsPage />} />
          <Route path="/users" element={<UsersPage />} />
          <Route path="/albums/:albumId/tracks" element={<AlbumTracksPage />} />
        </Routes>
      </main>
    </div>
  );
}