content-find-agent-new/web/components/cards/RecordList.tsx

import { compactValue } from "@/lib/status/status";

export function RecordList({
  items,
  empty,
  primaryKey = "id",
  fields
}: {
  items: Array<Record<string, unknown>>;
  empty: string;
  primaryKey?: string;
  fields: string[];
}) {
  if (!items.length) {
    return <div className="empty-state">{empty}</div>;
  }
  return (
    <div className="record-list">
      {items.slice(0, 20).map((item, index) => (
        <div className="record-row" key={String(item[primaryKey] || index)}>
          <strong>{compactValue(item[primaryKey] || item.title || item.search_query || `#${index + 1}`)}</strong>
          {fields.map((field) => (
            <span key={field}>
              {field}: {compactValue(item[field])}
            </span>
          ))}
        </div>
      ))}
    </div>
  );
}