---
import { EN_UI } from "../../core/i18n-ui.ts";
import type { UIStrings } from "../../core/i18n-ui.ts";
import { withBase } from "../islands/base-path.ts";
import Icon from "../Icon.astro";

// The site-wide announcement banner, shared by RootLayout and ReferenceLayout so
// every shell shows the same bar. The pre-paint hide for a dismissed banner and
// the dismiss click handler live in the layout/Header, not here.
interface Props {
  banner:
    | {
        content: string;
        link?: { text: string; href: string };
        dismissible: boolean;
        key: string;
      }
    | null;
  /** Localized banner labels. */
  strings?: UIStrings["banner"];
}

const { banner, strings } = Astro.props;
// Merge over the English baseline per key (rather than `strings ?? …`) so a
// partial — or missing — strings object still resolves every label to a
// default, matching the pattern PageFeedback and Search use.
const b = { ...EN_UI.banner, ...strings };
---

{
  banner && (
    <div
      class="relative flex items-center justify-center gap-x-2 gap-y-0.5 bg-foreground px-10 py-3 text-center text-background text-sm max-sm:flex-wrap dark:border-border dark:border-b dark:bg-background dark:text-foreground [:where([data-blume-banner-hidden])_&]:hidden"
      data-banner-key={banner.key}
      data-blume-banner
    >
      <span>{banner.content}</span>
      {banner.link && (
        <a
          class="inline-flex items-center gap-1 font-medium underline underline-offset-2"
          href={withBase(banner.link.href)}
        >
          {banner.link.text}
          <Icon name="arrow-right" size={14} />
        </a>
      )}
      {banner.dismissible && (
        <button
          aria-label={b.dismiss}
          class="absolute end-1.5 inline-flex size-7 items-center justify-center rounded-full text-background/80 transition-colors hover:bg-white/10 hover:text-background dark:text-foreground/70 dark:hover:bg-foreground/10 dark:hover:text-foreground"
          data-blume-banner-dismiss
          type="button"
        >
          <Icon name="x" size={16} />
        </button>
      )}
    </div>
  )
}