/**
 * A field/value list. Values are identifiers more often than not, so they
 * default to mono; `plain` opts a value back into the UI face.
 */
export function DetailList({ rows }) {
  return (
    <div className="overflow-hidden rounded-2xl border border-border bg-card">
      {rows.map(([label, value, options = {}]) => (
        <div
          key={label}
          className="flex items-baseline justify-between gap-3 border-border border-t px-4 py-3 first:border-t-0 sm:gap-6"
        >
          <span className="shrink-0 text-[13px] text-muted-foreground">
            {label}
          </span>
          <span
            className={
              options.plain
                ? 'break-all text-right text-[13.5px] text-foreground'
                : 'break-all text-right font-mono text-[12.5px] text-foreground'
            }
          >
            {value}
          </span>
        </div>
      ))}
    </div>
  );
}