// ─────────────────────────────────────────────
// DO_Fields_Display.jsx
// TextField — static text and formula display objects
// Requires: DO_Shared.jsx (S)
// ─────────────────────────────────────────────

// ─────────────────────────────────────────────
// TEXT / DISPLAY OBJECT
// Renders static content or formula with field substitution
// Not editable by the user — display only
// Formula: "Hello {f1}, your balance is {f3}"
//   → substitutes field values from current record
// ─────────────────────────────────────────────
function TextField({ obj, record }) {
  const display = obj.formula
    ? obj.formula.replace(/\{(\w+)\}/g, (_, f) => record?.[f] || "")
    : (record?.[obj.field] || obj.content || obj.label || "");

  return (
    <div style={{
      ...S.textObj,
      fontSize:        obj.fontSize  || '1em',
      fontWeight:      obj.fontWeight || 600,
      textAlign:       obj.textalign  || 'left',
      color:           obj.color      || '#fff',
      backgroundColor: obj.bgcolor    || '#1a3a5c',
    }}>
      {display}
    </div>
  );
}

// ─────────────────────────────────────────────
// SKELETON LOADER
// Shows while record data is loading
// ─────────────────────────────────────────────
function Skeleton() {
  return (
    <div style={S.skeletonWrap}>
      {[1,2,3].map(i => (
        <div key={i} style={S.skeletonRow}>
          {[1,2].map(j => (
            <div key={j} style={{ ...S.skeletonCol, flex: 1 }}>
              <div style={S.skeletonLabel} />
              <div style={S.skeletonInput} />
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}