import React from 'react';
import { Outlet } from 'react-router-dom';
import { Sidebar } from './Sidebar';
import { TopBar } from './TopBar';
import { PluginToolbar } from './PluginToolbar';
import { ToastContainer } from '@/components/ui/Toast';

export function AppShell() {
  return (
    <div className="flex h-screen overflow-hidden bg-secondary-50" data-testid="app-shell">
      <Sidebar />
      <div className="flex-1 flex flex-col overflow-hidden">
        <TopBar />
        <PluginToolbar />
        <main
          className="flex-1 overflow-y-auto focus:outline-none"
          tabIndex={-1}
          role="main"
          id="main-content"
          data-testid="content-area"
        >
          <Outlet />
        </main>
      </div>
      <ToastContainer />
    </div>
  );
}