import React from "react";

function ensureStyle(id, css) {
  if (typeof document === "undefined") return;
  if (document.getElementById(id)) return;
  const el = document.createElement("style");
  el.id = id; el.textContent = css;
  document.head.appendChild(el);
}

ensureStyle("at-banner", `
  .at-banner{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 16px;border-radius:var(--radius-md);
    border:1px solid var(--border-subtle);border-left:3px solid currentColor;font-family:var(--font-sans)}
  .at-banner__copy{min-width:0;flex:1}
  .at-banner__title{font-size:13px;line-height:18px;font-weight:700;color:var(--fg-1)}
  .at-banner__description{margin-top:2px;font-size:12px;line-height:16px;color:var(--fg-3)}
  .at-banner__actions{display:flex;align-items:center;gap:var(--space-xs);margin-left:auto}
  .at-banner--warning{background:var(--at-warning-bg);color:var(--at-warning-fg)}
  .at-banner--error{background:var(--at-flush-50);color:var(--at-flush-700)}
  .at-banner--info{background:var(--at-info-bg);color:var(--at-info-fg)}
`);

/**
 * Persistent message at the top of a section or page.
 */
export function Banner({ tone, title, description, actions }) {
  return (
    <div className={`at-banner at-banner--${tone}`} role={tone === "error" ? "alert" : "status"}>
      <div className="at-banner__copy">
        <div className="at-banner__title">{title}</div>
        {description && <div className="at-banner__description">{description}</div>}
      </div>
      {actions && <div className="at-banner__actions">{actions}</div>}
    </div>
  );
}