import { ReactNode } from "react";

type AppShellProps = {
  sidebar: ReactNode;
  header: ReactNode;
  children: ReactNode;
  sidebarOpen: boolean;
  onCloseSidebar: () => void;
};

export default function AppShell({ sidebar, header, children, sidebarOpen, onCloseSidebar }: AppShellProps) {
  return (
    <div className="min-h-screen flex flex-col">
      {header}
      <div className="flex-1 grid lg:grid-cols-[320px_1fr]">
        <aside
          className={`fixed inset-y-0 left-0 z-40 w-72 border-r border-[#DAD9D5] bg-[var(--card)] p-4 transition-transform lg:static lg:translate-x-0 lg:w-full ${
            sidebarOpen ? "translate-x-0" : "-translate-x-full"
          }`}
        >
          {sidebar}
        </aside>
        {sidebarOpen && (
          <button
            className="fixed inset-0 z-30 bg-black/30 lg:hidden"
            onClick={onCloseSidebar}
            aria-label="Menüyü kapat"
            type="button"
          />
        )}
        <main className="relative px-4 pb-24 pt-6 lg:px-8 lg:pb-8">{children}</main>
      </div>
    </div>
  );
}
