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

  view {
    <div
      data-ui-component="HeroActions"
      role="group"
      aria-label="Page actions"
      class='flex flex-wrap items-center gap-3 {class}'
      class:flex-col='orientation === "vertical" || stackOnMobile'
      class:sm:flex-row='orientation === "horizontal" && stackOnMobile'
      class:justify-center='align === "center"'
      class:justify-end='align === "right"'
      class:w-full='fullWidthMobile'
      class:sm:w-auto='fullWidthMobile'
    >
      {#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='{"sm:w-auto " + (action.class || "")}'
          />
        {/if}
      {/each}

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