/**
 * The strip that says "this is not the live page".
 *
 * Non-negotiable rather than decorative. A preview renders identically to the
 * published page, so without a visible marker an editor can read a preview,
 * believe the change is live, and stop. It is fixed to the bottom so it never
 * covers the header being reviewed, and it is a plain server-rendered element —
 * no script, because the preview must survive the same no-JavaScript rendering
 * the rest of the site is held to.
 */
export default function PreviewBanner({
  dir,
  stale,
  exitHref,
  label,
  exitLabel,
}: {
  dir: "rtl" | "ltr";
  stale: boolean;
  exitHref: string;
  label: string;
  exitLabel: string;
}) {
  return (
    <div
      dir={dir}
      role="status"
      style={{
        position: "fixed",
        insetInline: 0,
        bottom: 0,
        zIndex: 2147483000,
        display: "flex",
        flexWrap: "wrap",
        alignItems: "center",
        justifyContent: "center",
        gap: "0.75rem",
        padding: "0.6rem 1rem",
        background: stale ? "#7f1d1d" : "#1f2937",
        color: "#fff",
        font: "500 0.875rem/1.4 system-ui, sans-serif",
        boxShadow: "0 -2px 12px rgba(0,0,0,.25)",
      }}
    >
      <span>{label}</span>
      <a
        href={exitHref}
        style={{
          color: "#fff",
          textDecoration: "underline",
          textUnderlineOffset: "3px",
          whiteSpace: "nowrap",
        }}
      >
        {exitLabel}
      </a>
    </div>
  );
}