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

export interface DetailPageProps extends HTMLAttributes<HTMLDivElement> {
  /** PageHeader or custom header section */
  header?: ReactNode
  /** Action bar below the header (e.g. tabs, buttons) */
  actions?: ReactNode
  /** Single-column content area (max-w constrained for readability) */
  children: ReactNode
  /** Max width of the content area */
  maxWidth?: 'md' | 'lg' | 'xl' | 'full'
}

const maxWidthStyles = {
  md: 'max-w-2xl',
  lg: 'max-w-3xl',
  xl: 'max-w-5xl',
  full: '',
}

export const DetailPage = forwardRef<HTMLDivElement, DetailPageProps>(
  ({ header, actions, maxWidth = 'xl', className, children, ...props }, ref) => {
    return (
      <div ref={ref} className={cn('flex flex-col', className)} {...props}>
        {header}

        {actions && (
          <div className="flex items-center gap-4 border-b border-border px-6 py-3">
            {actions}
          </div>
        )}

        <div className="flex-1 p-6">
          <div className={cn(maxWidthStyles[maxWidth])}>
            {children}
          </div>
        </div>
      </div>
    )
  },
)
DetailPage.displayName = 'DetailPage'