---
type Props = {
  title: string
  eyebrow?: string
  standfirst?: string
  count?: number
}

const { title, eyebrow, standfirst, count } = Astro.props
---

<header class="simple-header dark">
  <div class="simple-header__inner">
    <div class="simple-header__text">
      {eyebrow && <p class="simple-header__eyebrow">{eyebrow}</p>}
      <h1 class="simple-header__title">{title}</h1>
      {standfirst && <p class="simple-header__standfirst">{standfirst}</p>}
    </div>
    {count !== undefined && (
      <p class="simple-header__count">
        <span aria-hidden="true">{String(count).padStart(2, '0')}</span>
        <span class="simple-header__hidden">
          {count} {count === 1 ? 'entry' : 'entries'}
        </span>
      </p>
    )}
  </div>
</header>