---
const { eyebrow, title, description, count, id, editorial = false } = Astro.props as {
  eyebrow?: string;
  title: string;
  description?: string;
  count?: string;
  id?: string;
  editorial?: boolean;
};
---
<div class:list={["section-heading", { "section-heading--editorial": editorial }]}>
  <div>
    {eyebrow && <span class="overline">{eyebrow}</span>}
    <h2 id={id}>{title}</h2>
    {description && <p>{description}</p>}
  </div>
  {count && <span class="result-count">{count}</span>}
</div>