import React from "react";
import "../styles/RAPersonalizedWidgets.css";
import AddToPersonalizedButton from "../common/AddToPersonalizedButton";

const RAStatusBreakdown = ({ statusGroups, widgetId }) => {
  return (
    <div className="pd-ra-widget-panel" style={{ height: "100%", overflow: "auto" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "12px" }}>
        <h3>Status breakdown</h3>
        {!window.location.pathname.includes("personalized") && (
          <AddToPersonalizedButton widgetId={widgetId || "raStatusBreakdown"} />
        )}
      </div>
      <div className="pd-ra-status-grid">
        {Object.entries(statusGroups).map(([id, { name, count }]) => (
          <div key={id} className="pd-ra-status-cell">
            <div className="pd-ra-status-name">{name}</div>
            <div className="pd-ra-status-count">{count}</div>
          </div>
        ))}
        {Object.keys(statusGroups).length === 0 && (
          <div style={{ color: "rgba(255,255,255,0.5)", fontSize: 13, gridColumn: "1 / -1" }}>No statuses available</div>
        )}
      </div>
    </div>
  );
};

export default RAStatusBreakdown;
