front/src/App.tsx

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { Globe2 } from 'lucide-react';
import LanguageSelection from './pages/LanguageSelection';
import ArabicChat from './pages/ArabicChat';
import FrenchChat from './pages/FrenchChat';
import { ChatProvider } from './context/ChatContext';

function App() {
  return (
    <ChatProvider>
      <Router>
        <div className="min-h-screen bg-[#F6F6F6]">
          <nav className="bg-white shadow-md p-4">
            <div className="container mx-auto flex items-center justify-between">
              <Link to="/" className="flex items-center space-x-2">
                <Globe2 className="h-6 w-6 text-blue-600" />
                <span className="text-xl font-semibold">MSA Translator</span>
              </Link>
              <div className="flex space-x-4">
                <Link to="/" className="px-4 py-2 rounded hover:bg-gray-100">Home</Link>
                <Link to="/arabic" className="px-4 py-2 rounded hover:bg-gray-100">Arabic Chat</Link>
                <Link to="/french" className="px-4 py-2 rounded hover:bg-gray-100">French Chat</Link>
              </div>
            </div>
          </nav>

          <Routes>
            <Route path="/" element={<LanguageSelection />} />
            <Route path="/arabic" element={<ArabicChat />} />
            <Route path="/french" element={<FrenchChat />} />
          </Routes>
        </div>
      </Router>
    </ChatProvider>
  );
}

export default App;