import { BrowserRouter, NavLink, Route, Routes, useLocation } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHouse, faBookOpen, faPlusCircle, faUser } from '@fortawesome/free-solid-svg-icons';
import HomePage from './pages/HomePage.jsx';
import MyBooksPage from './pages/MyBooksPage.jsx';
import AddBooksPage from './pages/AddBooksPage.jsx';
import ProfilePage from './pages/ProfilePage.jsx';
import { SavedBooksProvider } from './context/SavedBooksContext.jsx';
import './App.css';

const tabs = [
  { path: '/', label: 'Home', icon: faHouse },
  { path: '/my-books', label: 'My Books', icon: faBookOpen },
  { path: '/add-books', label: 'Add Books', icon: faPlusCircle },
  { path: '/profile', label: 'Profile', icon: faUser }
];

function BottomNav() {
  const location = useLocation();

  return (
    <nav className="bottom-nav">
      {tabs.map((tab) => (
        <NavLink
          key={tab.path}
          to={tab.path}
          className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
        >
          <FontAwesomeIcon icon={tab.icon} />
          <span>{tab.label}</span>
        </NavLink>
      ))}
    </nav>
  );
}

function App() {
  return (
    <SavedBooksProvider>
      <BrowserRouter>
        <div className="mobile-shell">
          <main className="page-container">
            <Routes>
              <Route path="/" element={<HomePage />} />
              <Route path="/my-books" element={<MyBooksPage />} />
              <Route path="/add-books" element={<AddBooksPage />} />
              <Route path="/profile" element={<ProfilePage />} />
            </Routes>
          </main>
          <BottomNav />
        </div>
      </BrowserRouter>
    </SavedBooksProvider>
  );
}

export default App;
