import type { ReactNode } from 'react'

interface PageHeaderProps {
  title: string
  description?: string
  actions?: ReactNode
  /** Visual style — set 'bar' to render inside a sticky top bar (used by list/edit pages). */
  variant?: 'plain' | 'bar'
}

export function PageHeader({ title, description, actions, variant = 'plain' }: PageHeaderProps) {
  if (variant === 'bar') {
    return (
      <div className="flex flex-wrap items-center justify-between gap-3 px-4 sm:px-6 py-3 sm:py-4 border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900">
        <div className="min-w-0 flex-1 basis-full sm:basis-auto">
          <h1 className="text-base sm:text-lg font-semibold text-slate-900 dark:text-slate-100 truncate">{title}</h1>
          {description && (
            <p className="text-xs text-slate-500 mt-0.5 truncate">{description}</p>
          )}
        </div>
        {actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
      </div>
    )
  }

  return (
    <div className="flex flex-wrap items-start justify-between gap-3 mb-5">
      <div className="min-w-0">
        <h1 className="text-lg sm:text-xl font-semibold text-slate-900 dark:text-slate-100">{title}</h1>
        {description && <p className="text-sm text-slate-500 mt-0.5">{description}</p>}
      </div>
      {actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
    </div>
  )
}
