import { Outlet } from "@tanstack/react-router";

import { Footer } from "@/client/components/footer";
import { Header } from "@/client/components/header";
import { SkipLink } from "@/client/components/skip-link";

export function AppShell() {
  return (
    <div className="relative z-10 flex min-h-screen flex-col">
      <SkipLink />
      <Header />
      <main id="main-content" className="flex-1">
        <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6">
          <Outlet />
        </div>
      </main>
      <Footer />
    </div>
  );
}