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() {
  //const [companies, setCompanies]=useState([]);
  //const [jobs, setJobs]=useState([]);

  /*useEffect(() => {
    // Fetch companies
    fetch("/api/companies")
      .then((response) => response.json())
      .then((data) => setCompanies(data))
      .catch((error) => console.error("Error fetching companies:", error));
      
    // Fetch jobs
    fetch("/api/jobs")
      .then((response) => response.json())
      .then((data) => setJobs(data))
      .catch((error) => console.error("Error fetching jobs:", error));
  }, []);*/

  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;