import React from 'react';
import { formatFieldLabel, formatFieldValueAsText } from './chatDataUtils';
import styles from './ChatAssistant.module.css';

interface ChatMessageTableProps {
  data: Record<string, unknown>[];
}

const ChatMessageTable: React.FC<ChatMessageTableProps> = ({ data }) => {
  if (data.length === 0) {
    return null;
  }

  const columns = Object.keys(data[0]);

  return (
    <div className={styles.chatTableWrapper}>
      <table className={styles.chatTable}>
        <thead>
          <tr>
            {columns.map((column) => (
              <th key={column}>{formatFieldLabel(column)}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((row, rowIndex) => (
            <tr key={rowIndex}>
              {columns.map((column) => (
                <td key={`${rowIndex}-${column}`}>{formatFieldValueAsText(row[column])}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default ChatMessageTable;