import "./swi-pd-embed.css";

export default function SwiStatsSummaryWidget({ assignments = [], locationTotal = 0 }) {
  const total = assignments.length;
  const completed = assignments.filter((r) => Number(r.document_status_id) === 4).length;
  const remaining = total - completed;

  const cards = [
    { label: "My SWIs", value: total },
    { label: "Remaining", value: remaining },
    { label: "Completed", value: completed },
    { label: "At location", value: locationTotal },
  ];

  return (
    <div className="swi-pd-widget swi-pd-stats">
      {cards.map((card) => (
        <div key={card.label} className="swi-pd-stats__card">
          <strong>{card.value}</strong>
          <span>{card.label}</span>
        </div>
      ))}
    </div>
  );
}
