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
      data-ui-component="SectionHeader"
      class='flex min-w-0 flex-col gap-5 {class}'
      class:items-center='align === "center"'
      class:text-center='align === "center"'
      class:items-end='align === "right"'
      class:text-right='align === "right"'
      class:lg:flex-row='align === "split"'
      class:lg:items-end='align === "split"'
      class:lg:justify-between='align === "split"'
    >
      <div
        class="min-w-0"
        class:max-w-xl='maxWidth === "xl"'
        class:max-w-2xl='maxWidth === "2xl"'
        class:max-w-3xl='maxWidth === "3xl"'
        class:max-w-4xl='maxWidth === "4xl"'
        class:mx-auto='align === "center"'
      >
        <div class="mb-3 flex items-center gap-3" class:justify-center='align === "center"' class:justify-end='align === "right"'>
          <slot name="icon"></slot>

          {#if eyebrow}
            <p
              class="text-xs font-bold uppercase tracking-[0.18em]"
              class:text-sm='size === "lg"'
              class:text-[var(--wire-color-primary)]='color === "primary"'
              class:text-[var(--wire-color-secondary)]='color === "secondary"'
              class:text-[var(--wire-color-success)]='color === "success"'
              class:text-[var(--wire-color-warning-text)]='color === "warning"'
              class:text-[var(--wire-color-danger)]='color === "danger"'
              class:text-[var(--wire-color-info)]='color === "info"'
            >
              {eyebrow}
            </p>
          {/if}
        </div>

        {#if headingLevel === 1}
          <h1
            id='{id}'
            class="font-bold leading-tight tracking-tight text-[var(--wire-color-text)]"
            class:text-3xl='size === "sm"'
            class:text-4xl='size === "default" || size === "md"'
            class:sm:text-5xl='size === "default" || size === "md"'
            class:text-5xl='size === "lg"'
            class:sm:text-6xl='size === "lg"'
          >
            {title}
          </h1>
        {:else if headingLevel === 3}
          <h3
            id='{id}'
            class="font-bold leading-tight tracking-tight text-[var(--wire-color-text)]"
            class:text-xl='size === "sm"'
            class:text-2xl='size === "default" || size === "md"'
            class:text-3xl='size === "lg"'
          >
            {title}
          </h3>
        {:else}
          <h2
            id='{id}'
            class="font-bold leading-tight tracking-tight text-[var(--wire-color-text)]"
            class:text-2xl='size === "sm"'
            class:text-3xl='size === "default" || size === "md"'
            class:sm:text-4xl='size === "default" || size === "md"'
            class:text-4xl='size === "lg"'
            class:sm:text-5xl='size === "lg"'
          >
            {title}
          </h2>
        {/if}

        {#if description}
          <p
            class="mt-4 leading-7 text-[var(--wire-color-text-muted)]"
            class:text-sm='size === "sm"'
            class:text-base='size === "default" || size === "md"'
            class:text-lg='size === "lg"'
          >
            {description}
          </p>
        {/if}

        <slot></slot>
      </div>

      <div
        class="flex shrink-0 flex-wrap items-center gap-3"
        class:justify-center='align === "center"'
        class:justify-end='align === "right" || align === "split"'
      >
        <slot name="actions"></slot>
      </div>
    </header>
  }
}