<script lang="ts">
  export let variant: 'green' | 'white' = 'green';
  export let eyebrow: string | undefined = undefined;
  export let title: string;
  export let subtitle: string | undefined = undefined;
</script>

<section class="page-header page-header--{variant}" class:page-header--has-media={$$slots.media}>
  <div class="ph-inner" class:ph-inner--grid={$$slots.media}>
    {#if $$slots.media}
      <div class="ph-copy">
        {#if eyebrow}<p class="eyebrow">{eyebrow}</p>{/if}
        <h1 class="ph-title">{title}</h1>
        {#if subtitle}<p class="ph-subtitle">{subtitle}</p>{/if}
        <slot />
      </div>
      <div class="ph-media">
        <slot name="media" />
      </div>
    {:else}
      {#if eyebrow}<p class="eyebrow">{eyebrow}</p>{/if}
      <h1 class="ph-title">{title}</h1>
      {#if subtitle}<p class="ph-subtitle">{subtitle}</p>{/if}
      <slot />
    {/if}
  </div>
</section>
