---
interface Props { title: string; introduction?: string; example?: boolean; breadcrumb?: boolean; hasImage?: boolean }
const { title, introduction, example = false, breadcrumb = true, hasImage = false } = Astro.props;
---
<section class:list={['page-hero', { 'page-hero--compact': !hasImage }]}>
  <div class="container">
    {breadcrumb && <nav class="breadcrumb" aria-label="Breadcrumb">
      <ol>
        {Astro.url.pathname !== '/' && <li><a href="/">Home</a></li>}
        {example && <li>Example</li>}
        <li aria-current="page">{title}</li>
      </ol>
    </nav>}
    <h1 class="page-hero__title">{title}</h1>
    {introduction && <p class="page-hero__lead">{introduction}</p>}
  </div>
</section>