import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
import { cn } from '@/lib/utils'

export interface DashboardPageProps extends HTMLAttributes<HTMLDivElement> {
  /** PageHeader or custom header section */
  header?: ReactNode
  /** Row of stat cards or summary widgets displayed above the content grid */
  stats?: ReactNode
  /** Two-column responsive content grid area */
  children: ReactNode
}

export const DashboardPage = forwardRef<HTMLDivElement, DashboardPageProps>(
  ({ header, stats, className, children, ...props }, ref) => {
    return (
      <div ref={ref} className={cn('flex flex-col', className)} {...props}>
        {header}

        <div className="flex flex-col gap-6 p-6">
          {stats && <div className="flex flex-wrap gap-4">{stats}</div>}

          <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
            {children}
          </div>
        </div>
      </div>
    )
  },
)
DashboardPage.displayName = 'DashboardPage'