import type { ReactNode } from "react";
import { Sidebar } from "@/components/Sidebar";

export function AppShell({
  title,
  description,
  actions,
  children,
}: {
  title: string;
  description: string;
  actions?: ReactNode;
  children: ReactNode;
}) {
  return (
    <div className="app-shell">
      <Sidebar />
      <main className="main-panel">
        <div className="page-grid">
          <header className="surface-card" style={{ padding: "var(--ml-space-6)", display: "flex", justifyContent: "space-between", gap: "var(--ml-space-4)", alignItems: "start", flexWrap: "wrap" }}>
            <div style={{ display: "grid", gap: "var(--ml-space-2)" }}>
              <div style={{ fontFamily: "var(--ml-font-display)", fontSize: "var(--ml-fs-2xl)", fontWeight: 700 }}>{title}</div>
              <div style={{ color: "var(--ml-text-secondary)", maxWidth: 720 }}>{description}</div>
            </div>
            {actions ? <div>{actions}</div> : null}
          </header>
          {children}
        </div>
      </main>
    </div>
  );
}
