WRNexusJS/packages/ui/components/SectionHeader.wrn

component SectionHeader {
  props {
    id: string = ""
    eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "left"
    size: string = "default"
    color: string = "primary"
    headingLevel: number = 2
    maxWidth: string = "3xl"
    class: string = ""
  }

  view {
    <header
      {...attrs}
      data-ui-component="SectionHeader"
      class='wrn-section-header {class}'
      data-align='{align}'
      data-size='{size}'
      data-color='{color}'
      data-max-width='{maxWidth}'
    >
      <div class="wrn-section-header__copy">
        <div class="wrn-section-header__eyebrow-row">
          <slot name="icon"></slot>
          <p class="wrn-section-header__eyebrow" data-show="eyebrow">{eyebrow}</p>
        </div>

        {#if headingLevel === 1}
          <h1 id='{id}' class="wrn-section-header__title">{title}</h1>
        {:else if headingLevel === 3}
          <h3 id='{id}' class="wrn-section-header__title">{title}</h3>
        {:else}
          <h2 id='{id}' class="wrn-section-header__title">{title}</h2>
        {/if}

        <p class="wrn-section-header__description" data-show="description">{description}</p>

        <slot></slot>
      </div>

      <div class="wrn-section-header__actions">
        <slot name="actions"></slot>
      </div>
    </header>
  }

  style {
    .wrn-section-header {
      --section-header-accent: var(--wrn-color-primary);
      --section-header-title: 1.875rem;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      min-width: 0;
    }

    .wrn-section-header[data-color="secondary"] {
      --section-header-accent: var(--wrn-color-secondary);
    }

    .wrn-section-header[data-color="success"] {
      --section-header-accent: var(--wrn-color-success);
    }

    .wrn-section-header[data-color="warning"] {
      --section-header-accent: var(--wrn-color-warning-text);
    }

    .wrn-section-header[data-color="danger"] {
      --section-header-accent: var(--wrn-color-danger);
    }

    .wrn-section-header[data-color="info"] {
      --section-header-accent: var(--wrn-color-info);
    }

    .wrn-section-header[data-align="center"] {
      align-items: center;
      text-align: center;
    }

    .wrn-section-header[data-align="right"] {
      align-items: flex-end;
      text-align: right;
    }

    .wrn-section-header__copy {
      min-width: 0;
    }

    .wrn-section-header[data-align="center"] .wrn-section-header__copy {
      margin-inline: auto;
    }

    .wrn-section-header[data-max-width="xl"] .wrn-section-header__copy {
      max-width: 36rem;
    }

    .wrn-section-header[data-max-width="2xl"] .wrn-section-header__copy {
      max-width: 42rem;
    }

    .wrn-section-header[data-max-width="3xl"] .wrn-section-header__copy {
      max-width: 48rem;
    }

    .wrn-section-header[data-max-width="4xl"] .wrn-section-header__copy {
      max-width: 56rem;
    }

    .wrn-section-header__eyebrow-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
    }

    .wrn-section-header[data-align="center"] .wrn-section-header__eyebrow-row {
      justify-content: center;
    }

    .wrn-section-header[data-align="right"] .wrn-section-header__eyebrow-row {
      justify-content: flex-end;
    }

    .wrn-section-header__eyebrow {
      margin: 0;
      color: var(--section-header-accent);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .wrn-section-header[data-size="lg"] .wrn-section-header__eyebrow {
      font-size: 0.875rem;
    }

    .wrn-section-header__title {
      margin: 0;
      color: var(--wrn-color-text);
      font-size: var(--section-header-title);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.02em;
    }

    .wrn-section-header__description {
      margin: 1rem 0 0;
      color: var(--wrn-color-text-muted);
      font-size: 1rem;
      line-height: 1.7;
    }

    .wrn-section-header[data-size="sm"] .wrn-section-header__description {
      font-size: 0.875rem;
    }

    .wrn-section-header[data-size="lg"] .wrn-section-header__description {
      font-size: 1.125rem;
    }

    .wrn-section-header__actions {
      display: flex;
      flex-shrink: 0;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.75rem;
    }

    .wrn-section-header[data-align="center"] .wrn-section-header__actions {
      justify-content: center;
    }

    .wrn-section-header[data-align="right"] .wrn-section-header__actions,
    .wrn-section-header[data-align="split"] .wrn-section-header__actions {
      justify-content: flex-end;
    }

    /*
     * Heading sizes scale up with the viewport rather than being fixed, and
     * split only becomes a row once there is width for two columns.
     */
    .wrn-section-header[data-size="sm"] {
      --section-header-title: 1.5rem;
    }

    .wrn-section-header[data-size="lg"] {
      --section-header-title: 2.25rem;
    }

    @media (min-width: 640px) {
      .wrn-section-header {
        --section-header-title: 2.25rem;
      }

      .wrn-section-header[data-size="sm"] {
        --section-header-title: 1.75rem;
      }

      .wrn-section-header[data-size="lg"] {
        --section-header-title: 3rem;
      }
    }

    @media (min-width: 1024px) {
      .wrn-section-header[data-align="split"] {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
      }
    }
  }
}