import type { ReactNode } from 'react'
import { avatarColors, initials } from './avatar'

/** Entity header: avatar + name + status pill + one meta line + action cluster. */
export function RecordHeader(props: {
  name: string
  avatarSeed?: string
  status?: ReactNode
  meta?: ReactNode
  actions?: ReactNode
}) {
  const seed = props.avatarSeed ?? props.name
  const { bg, fg } = avatarColors(seed)
  return (
    <div className="wf-rec">
      <div className="wf-avatar" style={{ background: bg, color: fg }}>{initials(seed)}</div>
      <div className="wf-rec-body">
        <div className="wf-rec-title">
          <h1>{props.name}</h1>
          {props.status}
        </div>
        {props.meta !== undefined && <div className="wf-rec-meta">{props.meta}</div>}
      </div>
      {props.actions !== undefined && <div className="wf-rec-actions">{props.actions}</div>}
    </div>
  )
}