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-validation-message", `
  .at-validation{display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:4px 9px;border-radius:var(--radius-pill);
    font-family:var(--font-sans);font-size:11px;line-height:16px;font-weight:600}
  .at-validation svg{width:13px;height:13px;flex:0 0 13px}
  .at-validation--error{background:var(--at-flush-50);color:var(--at-flush-700)}
  .at-validation--warning{background:var(--at-warning-bg);color:var(--at-warning-fg)}
  .at-validation--info{background:var(--at-info-bg);color:var(--at-info-fg)}
  .at-validation--success{background:var(--at-success-bg);color:var(--at-success-fg)}
`);

const DEFAULT_ICON = {
  error: "!",
  warning: "!",
  info: "i",
  success: "✓",
};

/**
 * Section-level validation or status feedback.
 */
export function ValidationMessage({ tone, icon = null, children }) {
  const marker = icon || <span aria-hidden="true">{DEFAULT_ICON[tone]}</span>;
  return (
    <div className={`at-validation at-validation--${tone}`} role={tone === "error" ? "alert" : "status"}>
      {marker}
      <span>{children}</span>
    </div>
  );
}