// ─── Shared UI Primitives ────────────────────────────────────────────────────

export function Card({ children, style }) {
  return <div className="card" style={style}>{children}</div>;
}

export function CardHeader({ icon, children, actions }) {
  if (actions) {
    return (
      <div className="card-header-row">
        <span className="card-title">
          {icon && <span>{icon}</span>}
          {children}
        </span>
        {actions}
      </div>
    );
  }
  return (
    <div className="card-header">
      {icon && <span>{icon}</span>}
      {children}
    </div>
  );
}

export function Callout({ type = 'info', children }) {
  return <div className={`callout callout-${type}`}>{children}</div>;
}

export function FormGroup({ label, children }) {
  return (
    <div className="form-group">
      {label && <label>{label}</label>}
      {children}
    </div>
  );
}

export function ResponseBox({ result }) {
  if (!result) return null;
  return (
    <div className={`resp-box ${result.ok ? 'ok' : 'err'}`}>
      {JSON.stringify(result.data, null, 2)}
    </div>
  );
}

export function Tag({ children }) {
  return <span className="tag">{children}</span>;
}

export function Badge({ type = 'muted', children }) {
  return <span className={`badge badge-${type}`}>{children}</span>;
}

export function StepBar({ steps, current }) {
  return (
    <div className="step-bar">
      {steps.map((s, i) => (
        <div
          key={i}
          className={`step-item ${i < current ? 'done' : i === current ? 'active' : ''}`}
        >
          <div className="step-num">{i < current ? '✓' : i}</div>
          <div className="step-label">{s.label}</div>
          <div className="step-sub">{s.sub}</div>
        </div>
      ))}
    </div>
  );
}