import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import AuthenticationScreen from './authentication';
import { Chat } from './chat';
import MailPage from './mail';
import DashboardPage from './dashboard';
import TaskPage from './tasks';
import TemplatesPage from './templates';
import DriveScreen from './drive';
import SyncPage from './sync/page';

const examples = [
  { name: "Home", href: "authentication" },
  { name: "Dashboard", href: "dashboard" },
  { name: "Chat", href: "chat" },
  { name: "Mail", href: "mail" },
  { name: "Drive", href: "drive" },
  { name: "Tasks", href: "tasks" },
  { name: "Meet", href: "meet" },
  { name: "Templates", href: "templates" },
  { name: "Settings", href: "sync" },
  { name: "Help", href: "help" },
];

const ExamplesNav = () => {
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <div className="examples-nav-container">
      <div className="examples-nav-inner">
        {examples.map((example) => (
          <button
            key={example.href}
            onClick={() => navigate(example.href)}
            className={`example-button ${
              location.pathname.includes(example.href) ? 'active' : ''
            }`}
          >
            {example.name}
          </button>
        ))}
      </div>
    </div>
  );
};


export function RootLayout() {
  return (
    <div className="app-container">
          <ExamplesNav />
          <main className="app-main">
            <Routes>
              <Route path="authentication" element={
                <>
                  <AuthenticationScreen />
                </>
              } />
              <Route path="chat" element={
                <>
                  <Chat />
                  
                </>
              } />
              <Route path="dashboard" element={
                <>
                  <DashboardPage />
                  
                </>
              } />
              <Route path="mail" element={
                <>
                  <MailPage />
                  
                </>
              } />
              <Route path="drive" element={<DriveScreen />} />
              <Route path="tasks" element={
                <>
                  <TaskPage />
                  
                </>
              } />
              <Route path="meet" element={<div>Meet Screen (Placeholder)</div>} />
              <Route path="templates" element={
                <>
                  <TemplatesPage />
                  
                </>
              } />
              <Route path="sync" element={<SyncPage />} />
            </Routes>
          </main>
    </div>
  );
}

  export default RootLayout;