import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
import { cn } from '../primitives/utils'

export interface PageFrameProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
  title: string
  subtitle?: string
  actions?: ReactNode
  nav?: ReactNode
  children: ReactNode
}

const PageFrame = forwardRef<HTMLDivElement, PageFrameProps>(
  ({ title, subtitle, actions, nav, className, children, ...props }, ref) => (
    <div ref={ref} className={cn('flex min-h-full flex-col', className)} {...props}>
      <div className="border-b border-border-glass/50 px-6 pb-3 pt-5">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
          <div>
            <h1 className="text-xl font-bold tracking-tight text-foreground">{title}</h1>
            {subtitle && <p className="mt-0.5 text-xs text-foreground-tertiary">{subtitle}</p>}
          </div>
          {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
        </div>
        {nav && <div className="mt-4">{nav}</div>}
      </div>
      <main className="flex-1 space-y-4 px-4 py-4 lg:px-6">{children}</main>
    </div>
  )
)
PageFrame.displayName = 'PageFrame'
export { PageFrame }
