import { NavLink, Outlet } from 'react-router-dom'

export function RootLayout() {
  return (
    <div className="app">
      <header className="app-header">
        <div className="header-row">
          <div className="brand">
            <span className="logo" aria-hidden>
              📚
            </span>
            <div>
              <h1>Ma librairie</h1>
            </div>
          </div>
          <nav className="main-nav" aria-label="Navigation principale">
            <NavLink
              to="/"
              end
              className={({ isActive }) =>
                isActive ? 'nav-link active' : 'nav-link'
              }
            >
              Mes livres
            </NavLink>
            <NavLink
              to="/recherche"
              className={({ isActive }) =>
                isActive ? 'nav-link active' : 'nav-link'
              }
            >
              Recherche (Axios)
            </NavLink>
            <NavLink
              to="/commande"
              className={({ isActive }) =>
                isActive ? 'nav-link active' : 'nav-link'
              }
            >
              Commande
            </NavLink>
            <NavLink
              to="/promotions"
              className={({ isActive }) =>
                isActive ? 'nav-link active' : 'nav-link'
              }
            >
              Promotions
            </NavLink>
          </nav>
        </div>
      </header>

      <div className="route-outlet">
        <Outlet />
      </div>

      <footer className="app-footer">
        <p>
          React + Vite · React Router (<code>Outlet</code>) ·{' '}
          <code>useContext</code> · Axios (Open Library)
        </p>
      </footer>
    </div>
  )
}