import Button from "./button.wrn"

component HeroActions {
  props {
    actions: unknown[] = []
    align: string = "left"
    orientation: string = "horizontal"
    stackOnMobile: boolean = true
    fullWidthMobile: boolean = true
    size: string = "default"
    color: string = "primary"
    class: string = ""
  }

  view {
    <div
      data-ui-component="HeroActions"
      role="group"
      aria-label="Page actions"
      data-align='{align}'
      data-orientation='{orientation}'
      data-stack-mobile='{stackOnMobile ? "true" : "false"}'
      data-full-mobile='{fullWidthMobile ? "true" : "false"}'
      class='wrn-hero-actions {class}'
    >
      {#each actions as action, index}
        {#if action.label}
          <Button
            label='{action.label}'
            href='{action.href || ""}'
            target='{action.target || ""}'
            rel='{action.rel || ""}'
            type='{action.type || "button"}'
            variant='{action.variant || (index === 0 ? "default" : "outline")}'
            color='{action.color || color}'
            size='{action.size || size}'
            disabled='{action.disabled || false}'
            loading='{action.loading || false}'
            icon='{action.icon || ""}'
            iconPosition='{action.iconPosition || "start"}'
            ariaLabel='{action.ariaLabel || action.label}'
            fullWidth='{fullWidthMobile}'
            controlClass='{action.controlClass || ""}'
            class='{"wrn-hero-actions__action " + (action.class || "")}'
          />
        {/if}
      {/each}

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

  style {
    .wrn-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
    .wrn-hero-actions[data-align="center"] { justify-content: center; }
    .wrn-hero-actions[data-align="right"] { justify-content: flex-end; }
    .wrn-hero-actions[data-orientation="vertical"] { flex-direction: column; align-items: stretch; }
    .wrn-hero-actions[data-full-mobile="true"] { width: 100%; }
    @media (max-width: 39.999rem) {
      .wrn-hero-actions[data-stack-mobile="true"] { flex-direction: column; align-items: stretch; }
    }
    @media (min-width: 40rem) {
      .wrn-hero-actions[data-full-mobile="true"] { width: auto; }
      .wrn-hero-actions__action { width: auto; }
    }
  }
}