import { remainingSummary } from "./swiPersonalDashboardHelpers.js";
import "./swi-pd-embed.css";

export default function SwiRemainingWidget({ assignments = [] }) {
  const summary = remainingSummary(assignments);

  return (
    <div className="swi-pd-widget swi-pd-remaining">
      <div className="swi-pd-remaining__stats">
        <div><strong>{summary.remaining}</strong><span>Remaining</span></div>
        <div><strong>{summary.completed}</strong><span>Completed</span></div>
        <div><strong>{summary.total}</strong><span>Total</span></div>
      </div>
      <div className="swi-pd-remaining__progress">
        <div className="swi-pd-remaining__progress-head">
          <span>Completion</span>
          <strong>{summary.progress}%</strong>
        </div>
        <div className="swi-pd-remaining__track">
          <span style={{ width: `${summary.progress}%` }} />
        </div>
      </div>
    </div>
  );
}
