import React from "react";
import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";
import HomePage from "./pages/HomePage";
import DebugPage from "./pages/DebugPage";

const App = () => (
  <BrowserRouter>
    <div className="app-shell">
      <header className="app-header">
        <div className="brand">
          <NavLink to="/">suivi_produits</NavLink>
        </div>
        <nav className="nav-links">
          <NavLink to="/" className={({ isActive }) => isActive ? "active" : ""}>
            <i className="fa-solid fa-home"></i> Accueil
          </NavLink>
          <NavLink to="/debug" className={({ isActive }) => isActive ? "active" : ""}>
            <i className="fa-solid fa-bug"></i> Debug
          </NavLink>
        </nav>
        <div className="actions">
          <button className="btn btn-primary">
            <i className="fa-solid fa-plus"></i> Add Product
          </button>
          <button className="btn">
            <i className="fa-solid fa-refresh"></i> Refresh
          </button>
        </div>
      </header>

      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/debug" element={<DebugPage />} />
      </Routes>
    </div>
  </BrowserRouter>
);

export default App;
