import React, { useState } from "react";
import { Routes, Route, Link } from "react-router-dom";
import ResumePage from "./pages/Resume";
import JobPage from "./pages/Job";
import ScoringPage from "./pages/Scoring";

export default function App() {
  const [showCreate, setShowCreate] = useState(false);

  return (
    <div className="min-h-screen bg-gray-50 text-gray-800">
      <header className="flex items-center justify-between p-4 border-b">
          <h1 className="text-2xl font-semibold">Recruitment HR</h1>
        <nav className="flex gap-2">
          <Link className="px-3 py-1 rounded bg-gray-100" to="/resumes">Resumes</Link>
          <Link className="px-3 py-1 rounded bg-gray-100" to="/jobs">Jobs</Link>
          <Link className="px-3 py-1 rounded bg-gray-100" to="/scoring">Scoring</Link>
        </nav>
      </header>
      <main>
        <Routes>
          <Route path="/resumes" element={<ResumePage />} />
          <Route path="/jobs" element={<JobPage />} />
          <Route path="/scoring" element={<ScoringPage />} />
          <Route path="*" element={<ResumePage />} />
        </Routes>
      </main>
    </div>
  );
}
            
// // import logo from './logo.svg';
// // import './App.css';

// // function App() {
// //   return (
// //     <div className="App">
// //       <header className="App-header">
// //         <img src={logo} className="App-logo" alt="logo" />
// //         <p>
// //           Edit <code>src/App.js</code> and save to reload.
// //         </p>
// //         <a
// //           className="App-link"
// //           href="https://reactjs.org"
// //           target="_blank"
// //           rel="noopener noreferrer"
// //         >
// //           Learn React
// //         </a>
// //       </header>
// //     </div>
// //   );
// // }

// // export default App;

// import React from 'react';
// import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
// import Page1 from './pages/Page1';
// import Page2 from './pages/Page2';
// import Page3 from './pages/Page3';
// import Page4 from './pages/Page4';

// function App() {
//   return (
//     <Router>
//       <div>
//         <nav>
//           <Link to="/">Page 1</Link> | 
//           <Link to="/page2">Page 2</Link> | 
//           <Link to="/page3">Page 3</Link> | 
//           <Link to="/page4">Page 4</Link>
//         </nav>
//         <Routes>
//           <Route path="/" element={<Page1 />} />
//           <Route path="/page2" element={<Page2 />} />
//           <Route path="/page3" element={<Page3 />} />
//           <Route path="/page4" element={<Page4 />} />
//         </Routes>
//       </div>
//     </Router>
//   );
// }

// export default App;