import React, { useState } from "react";
import SidebarNav from "./SidebarNav";
import type { NavItem } from "./SidebarNav";

interface SidebarLayoutProps {
  items?: NavItem[];
  children: React.ReactNode;
}

export default function SidebarLayout({ items, children }: SidebarLayoutProps) {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  return (
    <div className="relative min-h-screen flex bg-dark text-primary overflow-hidden">
      <div
        className="pointer-events-none absolute inset-0 bg-app-gradient"
        aria-hidden="true"
      />
      <SidebarNav
        items={items ?? []}
        isOpen={isSidebarOpen}
        onClose={() => setIsSidebarOpen(false)}
      />
      <div className="relative z-10 flex min-w-0 flex-1 flex-col">
        {React.Children.map(children, (child) => {
          // 将 toggleSidebar 函数传递给子组件
          if (React.isValidElement(child)) {
            return React.cloneElement(child, {
              // @ts-ignore - 动态传递 props
              onToggleSidebar: () => setIsSidebarOpen(!isSidebarOpen),
            } as any);
          }
          return child;
        })}
      </div>
    </div>
  );
}