frontend/src/components/RegisterTable.jsx

import React from 'react'

const TYPE_LABEL = {
  deliverable: 'Deliverable',
  payment: 'Payment',
  renewal_termination: 'Renewal/Term',
  compliance: 'Compliance',
  service_level: 'SLA',
  confidentiality: 'Confidentiality',
  insurance: 'Insurance',
  other: 'Other',
}

export default function RegisterTable({ obligations, clauseById, selected, onSelect }) {
  if (!obligations.length) return <p className="muted pad">No obligations extracted.</p>
  return (
    <table className="register">
      <thead>
        <tr>
          <th>Who</th>
          <th>Must do what</th>
          <th>By when</th>
          <th>Amount</th>
          <th>Type</th>
          <th>§</th>
        </tr>
      </thead>
      <tbody>
        {obligations.map((o) => {
          const clause = clauseById.get(o.clause_id)
          const active = selected && selected.id === o.clause_id
          return (
            <tr
              key={o.id}
              className={active ? 'active' : ''}
              onClick={() => onSelect(o.clause_id)}
              title={o.source_sentence}
            >
              <td className="party">{o.party}</td>
              <td>{o.action}</td>
              <td className="deadline">
                {o.deadline_date || o.deadline_text || '—'}
              </td>
              <td className="amount">{o.amount_text || '—'}</td>
              <td><span className={'type-chip t-' + o.obligation_type}>{TYPE_LABEL[o.obligation_type]}</span></td>
              <td className="clause-ref">{clause?.number || o.clause_id}</td>
            </tr>
          )
        })}
      </tbody>
    </table>
  )
}