import React, { useEffect, useState } from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import CompanyList from "./components/CompanyList";
import JobList from "./components/JobList";
import CompanyForm from "./components/CompanyForm";
import JobForm from "./components/JobForm";
import CompanyJobs from "./components/CompanyJobs";

function App() {
  return (    
    <BrowserRouter>
      <nav style={{padding:8, borderBottom:"1px solid #ccc", marginBottom:16}}>
        <Link to="/">Jobs</Link> | {" "}
        <Link to="/companies">Companies</Link>
      </nav>
      <Routes>
        <Route path="/" element={<JobList />} />
        <Route path="/jobs/new" element={<JobForm/>} />
        <Route path="/jobs/:id/edit" element={<JobForm/>} />

        <Route path="/companies" element={<CompanyList />} />
        <Route path="/companies/new" element={<CompanyForm />} />
        <Route path="/companies/:id/edit" element={<CompanyForm />} />
        <Route path="/companies/:id/jobs" element={<CompanyJobs/>} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;