import React, { useState, useEffect } from 'react';
import { fetchRecordLog } from '../api/posts_trm';

function TransactionLogs({ userId }) {
  const [records, setRecords] = useState([]);

  useEffect(() => {
    fetchRecordLog(userId)
      .then(data => setRecords(data))
      .catch(err => console.error('fetchRecordLog error:', err));
  }, [userId]);

  return (
    <section className="dashboard-logs">
      <table className="admin-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>用户ID</th>
            <th>类型</th>
            <th>内容</th>
            <th>IP</th>
            <th>创建时间</th>
          </tr>
        </thead>
        <tbody>
          {records.length > 0
            ? records.map((r, i) => (
                <tr key={i}>
                  <td>{r.id}</td>
                  <td>{r.user_id}</td>
                  <td>{r.type}</td>
                  <td>{r.content}</td>
                  <td>{r.ip}</td>
                  <td>{new Date(r.created_at).toLocaleString()}</td>
                </tr>
              ))
            : (
              <tr>
                <td colSpan="6" style={{ textAlign: 'center' }}>暂无数据</td>
              </tr>
            )
          }
        </tbody>
      </table>
    </section>
  );
}

export default TransactionLogs;