import * as React from 'react'

import { cn } from '../primitives/utils'

export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
  eyebrow?: React.ReactNode
  title: React.ReactNode
  lede?: React.ReactNode
  metadata?: React.ReactNode[]
  actions?: React.ReactNode
  tight?: boolean
}

export function PageHeader({
  eyebrow,
  title,
  lede,
  metadata,
  actions,
  tight = false,
  className,
  ...props
}: PageHeaderProps) {
  return (
    <header className={cn('cmm-page-header', className)} {...props}>
      <div className="cmm-page-header__top">
        <div className="cmm-page-header__copy">
          {eyebrow !== undefined ? <div className="cmm-page-header__eyebrow">{eyebrow}</div> : null}
          <h1 className={cn('cmm-page-header__title', tight && 'cmm-page-header__title--tight')}>
            {title}
          </h1>
          {lede !== undefined ? <p className="cmm-page-header__lede">{lede}</p> : null}
        </div>
        {actions !== undefined ? <div className="cmm-page-header__actions">{actions}</div> : null}
      </div>
      {metadata !== undefined && metadata.length > 0 ? (
        <div className="cmm-page-header__metadata">
          {metadata.map((item, index) => (
            <span className="cmm-page-header__metadata-item" key={index}>
              {item}
            </span>
          ))}
        </div>
      ) : null}
    </header>
  )
}
