import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import './index.css';

import { UserList } from './pages/User/UserList';
import { UserDetail } from './pages/User/UserDetail';
import { UserForm } from './pages/User/UserForm';
import { TaskList } from './pages/Task/TaskList';
import { TaskDetail } from './pages/Task/TaskDetail';
import { TaskForm } from './pages/Task/TaskForm';

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <div className="min-h-screen bg-gray-50">
        <nav className="bg-white shadow-sm">
          <div className="container mx-auto px-4 py-4">
            <div className="flex gap-4">
              <Link to="/" className="text-blue-600 hover:underline">Home</Link>
              <Link to="/Users" className="text-blue-600 hover:underline">Users</Link>
              <Link to="/Tasks" className="text-blue-600 hover:underline">Tasks</Link>
            </div>
          </div>
        </nav>
        <Routes>
          <Route path="/" element={<div className="container mx-auto p-4"><h1 className="text-3xl font-bold">Task Management System</h1></div>} />
          <Route path="/Users" element={<UserList />} />
          <Route path="/Users/new" element={<UserForm />} />
          <Route path="/Users/:id" element={<UserDetail />} />
          <Route path="/Users/:id/edit" element={<UserForm />} />
          <Route path="/Tasks" element={<TaskList />} />
          <Route path="/Tasks/new" element={<TaskForm />} />
          <Route path="/Tasks/:id" element={<TaskDetail />} />
          <Route path="/Tasks/:id/edit" element={<TaskForm />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
};

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
