import type { ReactNode } from 'react';
import { DashboardLayout } from '@/features/dashboard/DashboardLayout';
import { ViewHeader } from './ViewHeader';
import { PageContainer } from './PageContainer';

interface PageLayoutProps {
  title: string | ReactNode;
  subtitle?: string;
  icon?: ReactNode;
  actions?: ReactNode;
  rightContent?: ReactNode;
  breadcrumbs?: ReactNode;
  gradient?: boolean;
  badge?: string;
  badgeColor?: 'blue' | 'green' | 'purple' | 'orange' | 'gray';
  children: ReactNode;
  /** Content rendered outside the boxed container (modals, panels, etc.) */
  overlay?: ReactNode;
}

export function PageLayout({
  title,
  subtitle,
  icon,
  actions,
  rightContent,
  breadcrumbs,
  gradient,
  badge,
  badgeColor,
  children,
  overlay,
}: PageLayoutProps) {
  return (
    <DashboardLayout>
      <ViewHeader
        title={title}
        subtitle={subtitle}
        icon={icon}
        actions={actions}
        rightContent={rightContent}
        breadcrumbs={breadcrumbs}
        gradient={gradient}
        badge={badge}
        badgeColor={badgeColor}
      />
      <PageContainer maxWidth="6xl">
        <div className="p-8 space-y-6">
          {children}
        </div>
      </PageContainer>
      {overlay}
    </DashboardLayout>
  );
}