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

export default function SwiLocationBarWidget({ documents = [] }) {
  const series = locationSeries(documents);
  const max = Math.max(1, ...series.map((s) => s.value));

  if (!series.length) {
    return <p className="swi-pd-empty">No location SWI data.</p>;
  }

  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"
              style={{ width: `${(item.value / max) * 100}%` }}
            />
          </div>
          <span className="swi-pd-bars__value">{item.value}</span>
        </div>
      ))}
    </div>
  );
}
