import React from "react";
import { useRoutes, Outlet, BrowserRouter } from 'react-router-dom';
import Cars from './components/Cars.jsx';
import Header from "./components/commons/Header.jsx"
import 'bootstrap/dist/css/bootstrap.min.css';
import Buyers from './components/Buyers.jsx';
import Stores from './components/Stores.jsx';
import OneBuyer from './components/OneBuyer.jsx';
function Router(props) {
    return useRoutes(props.rootRoute);
  }
  
  function App() {
    const routes = [
      { index: true, element: <Buyers /> },
      { path: '/', element: <Buyers />},
      { path: '/cars', element: <Cars />, label: 'Машины' },
      { path: '/buyers', element: <Buyers />, label: 'Покупатель' },
      { path: '/stores', element: <Stores />, label: 'Магазины' },
      { path: '/buyer/:id', element: <OneBuyer />},
    ];
    const links = routes.filter(route => route.hasOwnProperty('label'));
    const rootRoute = [
      { path: '/', element: render(links), children: routes }
    ];
    function render(links) {
      return (
        <div className="App">
          <Header links={links} />         
          <div className="w-100">
            <Outlet />
          </div>        
      </div>
    );
  }
  
    return (
      <BrowserRouter>
        <Router rootRoute={ rootRoute } />
      </BrowserRouter>
    );
  }
  
  export default App;