component PageHeader {
  props {
    eyebrow = ""
    title = ""
    description = ""
    icon = ""
    align = "left"
    size = "default"
    compact = false
    showBreadcrumbs = false
    breadcrumbs = []
    primaryLabel = ""
    primaryHref = ""
    primaryIcon = ""
    secondaryLabel = ""
    secondaryHref = ""
    secondaryIcon = ""
    color = "primary"
    variant = "default"
    class = ""
  }

  view {
    <div
      {...attrs}
      data-ui-component="PageHeader"
      data-size='{size}'
      data-color='{color}'
      class='{class}'
    >
      <Section
        spacing='{compact || size === "compact" ? "md" : "lg"}'
        variant='{variant}'
        color='{color}'
        borderBottom="true"
      >
        {#if showBreadcrumbs && breadcrumbs.length > 0}
          <Breadcrumb
            label="Breadcrumb"
            items='{breadcrumbs}'
            active='{breadcrumbs[breadcrumbs.length - 1]?.value || breadcrumbs[breadcrumbs.length - 1]?.label || ""}'
            color='{color}'
            class="mb-6"
          />
        {/if}

        <div
          class="flex flex-col gap-6"
          class:items-center='align === "center"'
          class:text-center='align === "center"'
          class:lg:flex-row='align !== "center"'
          class:lg:items-end='align !== "center"'
          class:lg:justify-between='align !== "center"'
        >
          <div class="max-w-4xl">
            {#if icon}
              <span class="mb-5 inline-flex size-12 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]">
                <span class='{icon + " size-6"}' aria-hidden="true"></span>
              </span>
            {/if}

            <SectionHeader
              eyebrow='{eyebrow}'
              title='{title}'
              description='{description}'
              align='{align === "center" ? "center" : "left"}'
              size='{compact || size === "compact" ? "sm" : "lg"}'
              color='{color}'
              headingLevel="1"
              maxWidth="4xl"
            >
              <slot name="meta"></slot>
            </SectionHeader>
          </div>

          <div class="flex flex-wrap items-center gap-3" class:justify-center='align === "center"'>
            {#if secondaryLabel}
              <Button
                label='{secondaryLabel}'
                href='{secondaryHref}'
                icon='{secondaryIcon}'
                variant="outline"
                color='{color}'
              />
            {/if}

            {#if primaryLabel}
              <Button
                label='{primaryLabel}'
                href='{primaryHref}'
                icon='{primaryIcon}'
                variant="default"
                color='{color}'
              />
            {/if}

            <slot name="actions"></slot>
          </div>
        </div>

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