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-detaillist", `
  .at-detaillist{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-page);
    overflow:hidden;font-family:var(--font-sans)}
  .at-detaillist__head{padding:14px 18px;border-bottom:1px solid var(--border-subtle);
    font-size:15px;font-weight:600;color:var(--fg-1)}
  .at-detaillist__row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 18px}
  .at-detaillist__label{font-size:13px;color:var(--fg-4)}
  .at-detaillist__value{font-size:13px;color:var(--fg-1);text-align:right;font-variant-numeric:tabular-nums}
`);

/**
 * Key-value detail card: a titled panel of label/value rows. Values are free
 * nodes — plain text, a Chip (status), or a CodeValue (reference code). The
 * applied identity/detail side panels in ui_kits/app are instances.
 */
export function DetailList({ title, rows = [] }) {
  return (
    <div className="at-detaillist">
      {title && <div className="at-detaillist__head">{title}</div>}
      {rows.map((row, i) => (
        <div key={i} className="at-detaillist__row">
          <span className="at-detaillist__label">{row.label}</span>
          <span className="at-detaillist__value">{row.value}</span>
        </div>
      ))}
    </div>
  );
}