import * as React from 'react'
import { cn } from '@/lib/utils'

/**
 * PageHeader — title + optional description + actions slot. Use в верху route'а.
 *
 * breadcrumb prop рендерится тонкой строкой ВЫШЕ title (cap-style).
 * Обычно JSX с <Link>ами через separator: "Справочники / Космические аппараты".
 */
export type PageHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
  title: React.ReactNode
  description?: React.ReactNode
  actions?: React.ReactNode
  breadcrumb?: React.ReactNode
}

export function PageHeader({
  className,
  title,
  description,
  actions,
  breadcrumb,
  children,
  ...props
}: PageHeaderProps) {
  return (
    <div className={cn('flex flex-col gap-1 mb-4', className)} {...props}>
      {breadcrumb && (
        <div className="text-cap font-display text-mute leading-tight mb-1">
          {breadcrumb}
        </div>
      )}
      <div className="flex items-start justify-between gap-3 flex-wrap">
        <div className="min-w-0">
          <h1 className="text-title-lg text-ink truncate">{title}</h1>
          {description && <p className="text-body text-ink-2 mt-1 max-w-2xl">{description}</p>}
        </div>
        {actions && <div className="shrink-0 flex items-center gap-2">{actions}</div>}
      </div>
      {children}
    </div>
  )
}
