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-field-row", `
  .at-field-row{display:grid;grid-template-columns:repeat(var(--at-field-row-columns,2),minmax(0,1fr));gap:var(--space-sm)}
  @media (max-width:560px){.at-field-row{grid-template-columns:1fr}}
`);

/**
 * Equal-column layout for compact groups of Field components.
 */
export function FieldRow({ columns = 2, children }) {
  return (
    <div className="at-field-row" style={{ "--at-field-row-columns": columns }}>
      {children}
    </div>
  );
}