import { About, Location, Careers, Error } from "../views"; // Importing components from the 'views' directory
import { Routes, Route } from 'react-router-dom'; // Importing React Router DOM components
import Header from './Header'; // Importing the Header component
import Footer from './Footer'; // Importing the Footer component
import MainSection from './MainSection'; // Importing the MainSection component

// Defining the routes and their corresponding components
export const routerLinks = [
    {
        id: 1,
        path: '/about',
        component: <About/>,
        title: "About"
    },
    {
        id: 2,
        path: '/location',
        component: <Location/>,
        title: "Location"
    },
    {
        id: 3,
        path: '/careers',
        component: <Careers/>,
        title: "Careers"
    },
    {
        id: 4,
        path: '*', // This acts as a catch-all for undefined routes
        component: <Error/>
    }
];

// Main App component
const App = () => {
  return (
    <>
      <MainSection>
        <Header/>  {/* Header component */}
        <Routes>  {/* React Router DOM Routes component */}
          {
            routerLinks.length && 
            routerLinks.map((item) => 
            <Route key={item.id} path={item.path} element={item.component}/>)
          }
        </Routes>
        <Footer/>  {/* Footer component */}
      </MainSection>
    </>
  );
};

export default App;