---
type Props = {
  eyebrow?: string;
  title: string;
  lead?: string;
  image?: string;
  imageAlt?: string;
  icon?: string;
};

const { eyebrow, title, lead, image, imageAlt = "Water resources and coastal landscape", icon } = Astro.props;
const hasPhoto = Boolean(image);
---

<section class:list={["page-hero", { "page-hero--compact": !hasPhoto }]}>
  <div class="hero-copy">
    {icon && <img class="hero-icon" src={icon} alt="" aria-hidden="true" width="64" height="64" loading="eager" />}
    {eyebrow && <p class="eyebrow">{eyebrow}</p>}
    <h1>{title}</h1>
    {lead && <p>{lead}</p>}
  </div>
  {hasPhoto && <img src={image} alt={imageAlt} width="1280" height="854" loading="eager" />}
</section>
