import logo from './logo.svg';
import './App.css';
import CategoryListClass from './components/Category/CategoryListClass';
import CategoryListFunction from './components/Category/CategoryListFunction';
import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';
import ProductList from './components/Product/ProductList';

function App() {
  return (
    <Router>
      <div className="App">
        <div className="topbar">
          <h1>Product Management System</h1>
        </div>
        <div className="container">
          <nav className="sidebar">
            <ul>
              <li>
                <Link to="/category1">Category Class</Link>
              </li>
              <li>
                <Link to="/category2">Category Functional</Link>
              </li>
              <li>
                <Link to="/product">Product</Link>
              </li>
            </ul>
          </nav>
          <div className="content">
            <Routes>
              <Route path="/category1" element={<CategoryListClass />} />
              <Route path="/category2" element={<CategoryListFunction />} />
              <Route path="/product" element={<ProductList />} />
            </Routes>
          </div>
        </div>
      </div>
    </Router>
  );
}

export default App;
