/**
 * DesktopLayout 桌面端布局组件
 * 设计稿参考: UIDesignSpec.md 3.2
 * 尺寸: 1440x900，侧边栏260px
 */
import React from 'react';
import { Sidebar, SidebarSection } from '../navigation/Sidebar';

export interface DesktopLayoutProps {
  children: React.ReactNode;
  logo?: React.ReactNode;
  sidebarSections: SidebarSection[];
  activeNavId: string;
  onNavItemClick?: (id: string) => void;
  sidebarFooter?: React.ReactNode;
  headerContent?: React.ReactNode;
  className?: string;
  contentClassName?: string;
}

export const DesktopLayout: React.FC<DesktopLayoutProps> = ({
  children,
  logo,
  sidebarSections,
  activeNavId,
  onNavItemClick,
  sidebarFooter,
  headerContent,
  className = '',
  contentClassName = '',
}) => {
  return (
    <div className={`min-h-screen bg-bg-page ${className}`}>
      {/* Sidebar */}
      <Sidebar
        logo={logo}
        sections={sidebarSections}
        activeId={activeNavId}
        onItemClick={onNavItemClick}
        footer={sidebarFooter}
      />

      {/* Main Content */}
      <div className="ml-sidebar">
        {/* Header (optional) */}
        {headerContent && (
          <header className="px-8 py-4 border-b border-border-subtle bg-bg-page sticky top-0 z-10">
            {headerContent}
          </header>
        )}

        {/* Content Area */}
        <main className={`p-8 ${contentClassName}`}>
          {children}
        </main>
      </div>
    </div>
  );
};

export default DesktopLayout;