import {ReactNode} from "react";
import {cn} from "@/lib/utils";

type AppShellProps = {
  title: string;
  children: ReactNode;
  sidebar?: ReactNode;
  headerSlot?: ReactNode;
  contentClassName?: string;
};

export function AppShell({title, children, sidebar, headerSlot, contentClassName}: AppShellProps) {
  return (
    <div className="min-h-screen bg-gray-50 text-gray-950">
      <div className="flex min-h-screen">
        {sidebar ? (
          <aside className="hidden w-64 shrink-0 bg-gradient-to-b from-gray-900 to-gray-800 text-gray-50 lg:block">
            {sidebar}
          </aside>
        ) : null}
        <div className="flex min-h-screen flex-1 flex-col overflow-hidden">
          {/* Header */}
          <header className="border-b border-gray-100 bg-white px-6 py-4 sticky top-0 z-30 shadow-sm">
            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
              <div>
                <h1 className="text-lg font-semibold text-gray-900 tracking-tight">{title}</h1>
              </div>
              {headerSlot ? (
                <div className="flex items-center gap-2.5">{headerSlot}</div>
              ) : null}
            </div>
          </header>
          <main className={cn("flex-1 p-6", contentClassName)}>{children}</main>
        </div>
      </div>
    </div>
  );
}