// RecentJobsList - Generic component for displaying recent jobs
// Replaces duplicate TasksRecentJobs and HumanJobsList components
import React from 'react';
import Card from '../Card';
import TableExport from '../tools/TableExport';
import JobRow from './jobs/JobRow';
import { jobToExportRow } from './jobs/jobFormatters';

function RecentJobsList({ jobs, title = "Recent Jobs", exportFilename = "recent_jobs" }) {
  if (jobs.length === 0) {
    return null;
  }

  return (
    <Card title={`${title} (${jobs.length})`}>
      <div className="flex justify-between items-center mb-2">
        <span className="text-xs text-gray-500">{title} ({jobs.length})</span>
        <TableExport
          data={jobs.map(jobToExportRow)}
          filename={exportFilename}
          title={title}
        />
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-left text-sm">
          <thead>
            <tr className="border-b border-gray-200 text-xs text-gray-500 uppercase">
              <th className="py-2 px-3">ID</th>
              <th className="py-2 px-3">Ticket</th>
              <th className="py-2 px-3">Tool</th>
              <th className="py-2 px-3">Status</th>
              <th className="py-2 px-3">Duration</th>
              <th className="py-2 px-3">Error</th>
            </tr>
          </thead>
          <tbody>
            {jobs.map(j => <JobRow key={j.id} job={j} />)}
          </tbody>
        </table>
      </div>
    </Card>
  );
}

export default RecentJobsList;
