import React from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { useApiLogStore } from '../services/apiLogStore';

const ApiCalls = () => {
  const apiLogs = useApiLogStore((state) => state.apiLogs);

  return (
    <div className='p-4'>
      <h2 className='text-lg font-semibold'>API Calls</h2>
      <DataTable value={apiLogs}>
        {/* <Column field='timestamp' header='Timestamp' sortable /> */}
        <Column field='method' header='Method' />
        <Column field='url' header='URL' />
        <Column field='status' header='Status' />
        <Column field='responseTime' header='Time (ms)' />
      </DataTable>
    </div>
  );
};

export default ApiCalls;