import React from 'react';
import { Book, Search, Home, Library as LibraryIcon, FolderOpen, Languages } from 'lucide-react';

export const Layout = ({ children, currentView, setView, activeProject, lang, onLangChange, t }) => {
  return (
    <div dir={lang === 'ar' ? 'rtl' : 'ltr'} className="min-h-screen bg-slate-50 flex flex-col font-sans">
      {/* Header */}
      <header className="bg-emerald-900 text-white shadow-lg sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
          <div className="flex items-center gap-3 cursor-pointer" onClick={() => setView('home')}>
            <div className="bg-emerald-700 p-2 rounded-lg">
              <Book className="w-6 h-6 text-emerald-100" />
            </div>
            <h1 className="text-xl font-bold tracking-tight">{t.title}</h1>
          </div>

          <nav className="hidden md:flex items-center gap-1">
            <button onClick={() => setView('home')} className={`px-4 py-2 rounded-md flex items-center gap-2 transition ${currentView === 'home' ? 'bg-emerald-800' : 'hover:bg-emerald-800/50'}`}>
              <Home className="w-4 h-4" /> {t.navHome}
            </button>
            <button onClick={() => setView('smart-researcher')} className={`px-4 py-2 rounded-md flex items-center gap-2 transition ${currentView === 'smart-researcher' ? 'bg-emerald-800' : 'hover:bg-emerald-800/50'}`}>
              <Search className="w-4 h-4" /> {t.navSmartResearcher}
            </button>
            <button onClick={() => setView('library')} className={`px-4 py-2 rounded-md flex items-center gap-2 transition ${currentView === 'library' ? 'bg-emerald-800' : 'hover:bg-emerald-800/50'}`}>
              <LibraryIcon className="w-4 h-4" /> {t.navLibrary}
            </button>
            <button onClick={() => setView('research')} className={`px-4 py-2 rounded-md flex items-center gap-2 transition ${currentView === 'research' ? 'bg-emerald-800' : 'hover:bg-emerald-800/50'}`}>
              <FolderOpen className="w-4 h-4" /> {t.navProjects}
            </button>
          </nav>

          <div className="flex items-center gap-3">
             <button 
              onClick={() => onLangChange(lang === 'ar' ? 'fr' : 'ar')}
              className="flex items-center gap-2 bg-emerald-800 px-3 py-1.5 rounded-lg text-sm hover:bg-emerald-700 transition"
            >
              <Languages className="w-4 h-4" />
              {lang === 'ar' ? 'Français' : 'العربية'}
            </button>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-grow max-w-7xl mx-auto px-4 py-8 w-full">
        {children}
      </main>

      {/* Footer */}
      <footer className="bg-white border-t py-6 text-center text-slate-500 text-sm">
        <p>© {new Date().getFullYear()} {t.title} - {t.footerText}</p>
      </footer>
    </div>
  );
};