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

export default function SwiStatusBarWidget({ assignments = [] }) {
  const series = statusSeries(assignments);
  const max = Math.max(1, ...series.map((s) => s.value));

  return (
    <div className="swi-pd-widget swi-pd-bars">
      {series.map((item) => (
        <div key={item.label} className="swi-pd-bars__row">
          <span className="swi-pd-bars__label">{item.label}</span>
          <div className="swi-pd-bars__track">
            <div
              className={`swi-pd-bars__fill swi-pd-bars__fill--${item.tone}`}
              style={{ width: `${(item.value / max) * 100}%` }}
            />
          </div>
          <span className="swi-pd-bars__value">{item.value}</span>
        </div>
      ))}
    </div>
  );
}
