---
interface Props {
  title: string;
  kicker?: string;
  text?: string;
  image?: string;
  alt?: string;
}

const { title, kicker, text, image, alt = "" } = Astro.props;
---

<section class={`page-hero ${image ? "with-image" : ""}`}>
  <div class="container page-hero-grid">
    <div>
      {kicker && <p class="label">{kicker}</p>}
      <h1>{title}</h1>
      {text && <p class="lead">{text}</p>}
    </div>
    {image && (
      <figure class="page-hero-image">
        <img src={image} alt={alt} width="1200" height="800" />
      </figure>
    )}
  </div>
</section>
