import { Outlet } from "react-router-dom";

import { LangSwitch } from "./lang-switch";
import { ThemeSwitch } from "./theme-switch";
import { Sidebar } from "./sidebar";
import { BreadcrumbProvider } from "./breadcrumb-provider";
import { Breadcrumb } from "./breadcrumb";
import { HeaderSearch } from "./header-search";
import { UserMenu } from "./user-menu";

export function AppShell() {
  return (
    <div className="flex min-h-screen">
      <Sidebar />
      <BreadcrumbProvider>
        <div className="flex flex-1 flex-col">
          <header className="flex items-center gap-4 border-b px-4 py-2">
            <Breadcrumb />
            <HeaderSearch />
            <ThemeSwitch />
            <LangSwitch />
            <UserMenu />
          </header>
          <main className="flex-1 overflow-hidden">
            <Outlet />
          </main>
        </div>
      </BreadcrumbProvider>
    </div>
  );
}