import React from "react";
import AddToPersonalizedButton from "../common/AddToPersonalizedButton";

const RAStatusBreakdown = ({ statusGroups, widgetId }) => {
  return (
    <div style={{ height: "100%", overflow: "auto", padding: "16px", backgroundColor: "var(--theme-surface)", borderRadius: "8px" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
        <h3 style={{ margin: 0, fontSize: "16px", fontWeight: "600", color: "var(--theme-text-primary)" }}>Status Breakdown</h3>
        {!window.location.pathname.includes("personalized") && (
          <AddToPersonalizedButton widgetId={widgetId || "raStatusBreakdown"} />
        )}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(130px, 1fr))", gap: "12px" }}>
        {Object.entries(statusGroups).map(([id, { name, count }]) => (
          <div key={id} style={{ 
            padding: "16px", 
            border: "1px solid var(--theme-border)", 
            borderRadius: "8px", 
            display: "flex", 
            flexDirection: "column", 
            alignItems: "center",
            justifyContent: "center",
            gap: "8px",
            textAlign: "center"
          }}>
            <div style={{ fontSize: "14px", color: "var(--theme-text-secondary)", fontWeight: "500" }}>{name}</div>
            <div style={{ fontSize: "24px", fontWeight: "700", color: "var(--theme-text-primary)" }}>{count}</div>
          </div>
        ))}
        {Object.keys(statusGroups).length === 0 && (
          <div style={{ color: 'var(--theme-text-secondary)', gridColumn: "1 / -1" }}>No statuses available</div>
        )}
      </div>
    </div>
  );
};

export default RAStatusBreakdown;
