component AnnouncementBar {
  props {
    badge = ""
    badgeIcon = ""
    message = "Announcement"
    description = ""
    icon = "icon-[lucide--megaphone]"
    actionLabel = ""
    actionHref = ""
    actionIcon = ""
    dismissible = false
    dismissLabel = "Dismiss announcement"
    sticky = false
    compact = false
    size = "default"
    color = "primary"
    variant = "soft"
    role = "status"
    live = "polite"
    class = ""
  }

  state dismissed = false

  view {
    <aside
      data-ui-component="AnnouncementBar"
      role='{role}'
      aria-live='{live}'
      data-show='!dismissed'
      class='z-40 w-full border-y border-[var(--wire-color-border)] {class}'
      class:sticky='sticky'
      class:top-0='sticky'
      class:bg-[var(--wire-color-primary-soft)]='variant === "soft" && color === "primary"'
      class:border-[var(--wire-color-primary-muted)]='variant === "soft" && color === "primary"'
      class:bg-[var(--wire-color-info-soft)]='variant === "soft" && color === "info"'
      class:border-[var(--wire-color-info-muted)]='variant === "soft" && color === "info"'
      class:bg-[var(--wire-color-success-soft)]='variant === "soft" && color === "success"'
      class:border-[var(--wire-color-success-muted)]='variant === "soft" && color === "success"'
      class:bg-[var(--wire-color-warning-soft)]='variant === "soft" && color === "warning"'
      class:border-[var(--wire-color-warning-muted)]='variant === "soft" && color === "warning"'
      class:bg-[var(--wire-color-danger-soft)]='variant === "soft" && color === "danger"'
      class:border-[var(--wire-color-danger-muted)]='variant === "soft" && color === "danger"'
      class:bg-[var(--wire-color-primary)]='variant === "solid" && color === "primary"'
      class:text-[var(--wire-color-on-primary)]='variant === "solid" && color === "primary"'
      class:bg-[var(--wire-color-danger)]='variant === "solid" && color === "danger"'
      class:text-[var(--wire-color-on-danger)]='variant === "solid" && color === "danger"'
      class:bg-[var(--wire-color-surface-raised)]='variant === "default"'
    >
      <Container columns="1" maxWidth="xl" size="default">
        <div
          class="flex flex-col gap-4 py-4 sm:flex-row sm:items-center sm:justify-between"
          class:py-2.5='compact'
        >
          <div class="flex min-w-0 items-start gap-3 sm:items-center">
            {#if icon}
              <span
                class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-[var(--wire-color-surface-raised)] text-[var(--wire-color-primary)] shadow-sm"
                class:size-8='compact'
                class:text-[var(--wire-color-danger)]='color === "danger"'
                class:text-[var(--wire-color-warning-text)]='color === "warning"'
                class:text-[var(--wire-color-success)]='color === "success"'
                class:text-[var(--wire-color-info)]='color === "info"'
              >
                <span class='{icon + " size-5"}' aria-hidden="true"></span>
              </span>
            {/if}

            <div class="min-w-0">
              <div class="flex flex-wrap items-center gap-2">
                {#if badge}
                  <Badge
                    label='{badge}'
                    icon='{badgeIcon}'
                    size="sm"
                    color='{color}'
                    variant='{variant === "solid" ? "outline" : "solid"}'
                  />
                {/if}

                <p
                  class="font-semibold"
                  class:text-sm='compact || size === "sm"'
                  class:text-base='!compact && size !== "sm"'
                  class:text-[var(--wire-color-text)]='variant !== "solid"'
                >
                  {message}
                </p>
              </div>

              {#if description && !compact}
                <p
                  class="mt-1 text-sm leading-6"
                  class:text-[var(--wire-color-text-muted)]='variant !== "solid"'
                  class:opacity-85='variant === "solid"'
                >
                  {description}
                </p>
              {/if}
            </div>
          </div>

          <div class="flex shrink-0 items-center gap-2 sm:justify-end">
            {#if actionLabel}
              <TextLink
                label='{actionLabel}'
                href='{actionHref}'
                icon='{actionIcon}'
                iconPosition="start"
                showArrow="true"
                color='{variant === "solid" ? "neutral" : color}'
                variant='{variant === "solid" ? "button" : "default"}'
              />
            {/if}

            {#if dismissible}
              <button
                type="button"
                aria-label='{dismissLabel}'
                class="inline-flex size-9 items-center justify-center rounded-lg text-[var(--wire-color-text-muted)] transition hover:bg-[var(--wire-color-surface-raised)] hover:text-[var(--wire-color-text)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)]"
                @click='dismissed = true; event.currentTarget.dispatchEvent(new CustomEvent("dismiss", { bubbles: true }))'
              >
                <span class="icon-[lucide--x] size-4" aria-hidden="true"></span>
              </button>
            {/if}
          </div>
        </div>
      </Container>
    </aside>
  }
}