script-build-and-framework-tmp/visualization/frontend/components/flow/CardFields.tsx

import type { CardProjection } from "@/lib/types";

interface Props {
  card: CardProjection;
  className?: string;
}

/**
 * Shared business-card field hierarchy for both the canvas and mobile timeline.
 * The backend owns field selection and ordering; this component only renders it.
 */
export function CardFields({ card, className = "" }: Props) {
  if (!card.primary && !card.secondary.length) return null;
  const classes = ["cardFields", className].filter(Boolean).join(" ");
  return <div className={classes}>
    {card.primary ? <CardField label={card.primary.label} value={card.primary.value} primary /> : null}
    {card.secondary.map((field) => <CardField key={field.key} label={field.label} value={field.value} tone={field.tone} />)}
  </div>;
}

function CardField({ label, value, primary = false, tone = "normal" }: { label?: string; value: string; primary?: boolean; tone?: "normal" | "success" | "warning" | "failure" }) {
  return <div className={`cardField ${primary ? "cardFieldPrimary" : "cardFieldSecondary"} tone-${tone}`}>
    {label ? <b>{label}</b> : null}
    <p>{value}</p>
  </div>;
}