import React from "react";
import { BrowserRouter, Routes, Route, NavLink, Navigate } from "react-router-dom";
import OdiyaOCRTool from "./OdiyaOCRTool";
import Synthetic from "./pages/Synthetic";

const Nav = () => (
  <div className="w-full bg-white shadow-sm mb-4">
    <div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
      <div className="flex items-center gap-2">
        <img src="/logo.png" alt="Logo" style={{ width: 28, height: 28 }} />
        <span className="font-semibold text-blue-800">Odia AI Tools</span>
      </div>
      <div className="flex gap-4 text-sm">
        <NavLink
          to="/ocr"
          className={({ isActive }) =>
            `px-3 py-1 rounded ${isActive ? "bg-blue-600 text-white" : "hover:bg-gray-100"}`
          }
        >
          OCR Annotation
        </NavLink>
        <NavLink
          to="/synthetic"
          className={({ isActive }) =>
            `px-3 py-1 rounded ${isActive ? "bg-blue-600 text-white" : "hover:bg-gray-100"}`
          }
        >
          Synthetic Generator
        </NavLink>
      </div>
    </div>
  </div>
);

const App = () => {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/ocr" element={<OdiyaOCRTool />} />
        <Route path="/synthetic" element={<Synthetic />} />
        <Route path="*" element={<Navigate to="/ocr" replace />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;