'use client';

/**
 * DashboardContent — client wrapper for the main content area.
 *
 * Reads the right panel store to conditionally apply `xl:pr-[300px]`
 * when the panel is open on xl: viewports (≥1280px).
 *
 * Responsive breakpoint logic:
 * - xl: (≥1280px): sidebar (260px left padding) + content + right panel (300px right padding) side-by-side
 * - lg: (1024–1279px): sidebar (260px left padding) + content, right panel overlays
 * - md: (768–1023px): no sidebar padding, full width, both panels overlay
 * - default (<768px): single column, both panels overlay
 *
 * Requirements: 11.2, 11.3
 */

import { useRightPanelStore } from '@/lib/stores/right-panel-store';
import { useSidebarStore } from '@/lib/stores/sidebar-store';
import Footer from '@/components/layout/Footer';

interface DashboardContentProps {
  children: React.ReactNode;
}

export default function DashboardContent({ children }: DashboardContentProps) {
  const isPanelOpen = useRightPanelStore((s) => s.isOpen);
  const isCollapsed = useSidebarStore((s) => s.isCollapsed);

  return (
    <div
      className={`
        pt-14 min-h-screen flex flex-col
        transition-[padding] duration-300 ease-in-out
        ${isCollapsed ? 'lg:pl-16' : 'lg:pl-[260px]'}
        ${isPanelOpen ? 'xl:pr-[300px]' : ''}
      `}
    >
      <main className="flex-1 p-4 md:p-6 lg:p-8">
        {children}
      </main>
      <Footer />
    </div>
  );
}