// TicketRealizationTimeline - Component for displaying ticket realization timeline
import React from 'react';
import TicketHistoryItem from './TicketHistoryItem';

function TicketRealizationTimeline({ ticket, loading, error, onRefresh }) {
  if (!ticket) return null;

  const jobHistory = Array.isArray(ticket.job_history) ? [...ticket.job_history].sort((a, b) => (a.created_at || 0) - (b.created_at || 0)) : [];

  return (
    <div>
      <div className="flex items-center justify-between gap-2 mb-2">
        <div className="text-xs font-medium text-gray-500">Realization timeline</div>
        {onRefresh && (
          <button onClick={onRefresh} className="text-xs px-2 py-1 rounded bg-gray-100 text-gray-600 hover:bg-gray-200">
            Refresh details
          </button>
        )}
      </div>
      {loading && <p className="text-xs text-gray-500">Loading ticket history...</p>}
      {error && <p className="text-xs text-red-600">{error}</p>}
      {!loading && !error && jobHistory.length === 0 && (
        <p className="text-xs text-gray-500">No job history yet.</p>
      )}
      <div className="space-y-3">
        {jobHistory.map((job, index) => (
          <TicketHistoryItem key={job.id} job={job} index={index} />
        ))}
      </div>
    </div>
  );
}

export default TicketRealizationTimeline;
