import type { ReactNode } from "react"

import { cn } from "@/lib/utils"

type PageShellProps = {
  children: ReactNode
  className?: string
}

type PageHeaderProps = {
  title: ReactNode
  description?: ReactNode
  actions?: ReactNode
  className?: string
}

type PageSectionProps = {
  children: ReactNode
  title?: ReactNode
  description?: ReactNode
  actions?: ReactNode
  className?: string
  contentClassName?: string
}

export function PageShell({ children, className }: PageShellProps) {
  return (
    <main className={cn("flex min-h-0 w-full flex-col gap-4 p-4 md:p-6", className)}>
      {children}
    </main>
  )
}

export function PageHeader({ title, description, actions, className }: PageHeaderProps) {
  return (
    <header className={cn("flex flex-col gap-3 md:flex-row md:items-start md:justify-between", className)}>
      <div className="min-w-0 space-y-1">
        <h1 className="truncate text-xl font-semibold tracking-normal text-[var(--dg-text-primary)] md:text-2xl">
          {title}
        </h1>
        {description ? (
          <p className="max-w-3xl text-sm leading-6 text-[var(--dg-text-secondary)]">{description}</p>
        ) : null}
      </div>
      {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
    </header>
  )
}

export function PageSection({
  children,
  title,
  description,
  actions,
  className,
  contentClassName,
}: PageSectionProps) {
  const hasHeader = title || description || actions

  return (
    <section
      className={cn(
        "rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-secondary)] shadow-[var(--shadow-card)]",
        className,
      )}
    >
      {hasHeader ? (
        <div className="flex flex-col gap-3 border-b border-[var(--dg-border)] px-4 py-3 md:flex-row md:items-center md:justify-between">
          <div className="min-w-0 space-y-1">
            {title ? <h2 className="truncate text-base font-medium text-[var(--dg-text-primary)]">{title}</h2> : null}
            {description ? <p className="text-sm text-[var(--dg-text-secondary)]">{description}</p> : null}
          </div>
          {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
        </div>
      ) : null}
      <div className={cn("min-w-0 p-4", contentClassName)}>{children}</div>
    </section>
  )
}