import SectionHeader from "./SectionHeader.wrn"
import TextLink from "./TextLink.wrn"

component MarketingSectionHeader {
  props {
    id: string = ""
    eyebrow: string = ""
    title: string = ""
    description: string = ""
    align: string = "split"
    size: string = "default"
    color: string = "primary"
    actionLabel: string = ""
    actionHref: string = ""
    actionIcon: string = ""
    actionExternal: boolean = false
    class: string = ""
  }

  view {
    <div
      {...attrs}
      data-ui-component="MarketingSectionHeader"
      data-size='{size}'
      data-color='{color}'
      class='wrn-marketing-section-header {class}'
    >
      <SectionHeader
        id='{id}'
        eyebrow='{eyebrow}'
        title='{title}'
        description='{description}'
        align='{align}'
        size='{size}'
        color='{color}'
        headingLevel="2"
        maxWidth="3xl"
      >
        <div data-slot="icon">
          <slot name="icon"></slot>
        </div>

        <div data-slot="actions">
          {#if actionLabel}
            <TextLink
              label='{actionLabel}'
              href='{actionHref}'
              external='{actionExternal}'
              icon='{actionIcon}'
              iconPosition="start"
              showArrow="true"
              color='{color}'
            />
          {/if}
          <slot name="actions"></slot>
        </div>

        <slot></slot>
      </SectionHeader>
    </div>
  }

  style {
    .wrn-marketing-section-header { width: 100%; min-width: 0; }
  }
}