<!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Headline--default) -->
<script lang="ts">
  /**
   * Headline, parsed as an _inline_ markdown string in an `h1` element.
   * @type {string}
   */
  export let hed: string = 'Reuters Graphics Interactive';
  /**
   * Dek, parsed as a markdown string.
   * @type {string}
   */
  export let dek: string | null = null;
  /**
   * Section title
   * @type {string}
   */
  export let section: string | null = null;

  import Block from '../Block/Block.svelte';
  import { marked } from 'marked';
</script>

<Block class="mb-1">
  <header class="headline">
    {#if $$slots.crown}
      <div class="crown-container">
        <!-- Crown named slot -->
        <slot name="crown" />
      </div>
    {/if}
    <div class="title">
      {#if section}
        <p class="{'section-title'}">{section}</p>
      {/if}
      {#if $$slots.hed}
        <!-- Headline named slot -->
        <slot name="hed" />
      {:else}
        <h1>{@html marked.parseInline(hed)}</h1>
      {/if}
      {#if $$slots.dek}
        <!-- Dek named slot-->
        <slot name="dek" />
      {:else if dek}
        {@html marked(dek)}
      {/if}
    </div>
    {#if $$slots.byline || $$slots.dateline}
      <aside class="article-metadata" class:pt-1="{!dek}">
        {#if $$slots.byline}
          <div class="byline-container">
            <div class="byline">
              <!-- Byline named slot -->
              <slot name="byline" />
            </div>
          </div>
        {/if}
        {#if $$slots.dateline}
          <div class="dateline-container">
            <div class="published">
              <!-- Dateline named slot -->
              <slot name="dateline" />
            </div>
          </div>
        {/if}
      </aside>
    {/if}
  </header>
</Block>

<style lang="scss">
  @use '../../scss/tokens';
  @import '../../scss/fonts/variables';

  header.headline {
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 0;
    color: var(--theme-colour-text-primary);

    :global {
      h1 {
        font-size: 4rem;
        margin: 5px 0;
        line-height: 1.2;
        // font-family: var(--theme-font-family-hed, $font-family-display);
        @extend %font-sans;
        color: var(--theme-colour-text-primary);
      }

      p {
        font-family: var(--theme-font-family-subhed, $font-family-display);
        color: var(--theme-colour-text-primary);
        margin: 0;
        font-weight: 200;

        &.section-title {
          font-size: 1rem;
          font-weight: 800;
          color: var(--theme-colour-accent);
        }
      }
    }
    .article-metadata {
      padding: 40px 0;
      font-family: var(--theme-font-family-note, $font-family-display);
      color: var(--theme-colour-text-primary);

      text-align: center;

      .byline-container {
        margin-bottom: 2px;
      }

      .byline {
        :global {
          a {
            color: var(--theme-colour-text-primary);
            text-decoration: none;
          }
        }
      }

      .dateline-container {
        text-transform: uppercase;

        color: var(--theme-colour-text-secondary);
        font-size: 0.8rem;
        line-height: 1.2rem;
        letter-spacing: 0.2px;
      }
    }

    div.crown-container {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
