const NoImpactFunnelChart = ({ noImpactRules }) => {

  console.log("New No Impact at 6.48pm");

  if (!noImpactRules || noImpactRules.length === 0)
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100%",
          fontSize: 18,
          color: "#666",
          minHeight: 150
        }}
      >
      No Data Available
      </div>
    );

  const rowHeightPx = 40;

  // Limit rules to first 10 only
  const displayRules = noImpactRules.slice(0, 10);

  // Count commas and add 1 to get days in impactDiffWithDate
  const getInactiveDays = (impactDiffWithDate) => {
    if (!impactDiffWithDate) return 0;
    return (impactDiffWithDate.match(/,/g) || []).length + 1;
  };

  return (
    <>
      <style>{`
        /* Remove scroll-container max-height and overflow */
        .scroll-container {
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          border-radius: 12px;
          background-color: #fff;
        }
      `}</style>

      <div
        style={{
          maxWidth: 700,
          overflow: "hidden",
          fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
        }}
      >
        <div className="scroll-container">
          <table
            style={{
              width: "100%",
              borderCollapse: "separate",
              borderSpacing: 0,
              minWidth: 500,
              // allow table to expand naturally (no fixed height or max height)
            }}
          >
            <thead>
              <tr>
                <th
                  style={{
                    backgroundColor: "#f5f9ff",
                    color: "#2a3f66",
                    padding: "12px 15px",
                    textAlign: "left",
                    fontWeight: "700",
                    borderBottom: "2px solid #c4d1f5",
                    position: "sticky",
                    top: 0,
                    zIndex: 2,
                    maxWidth: 100,
                    whiteSpace: "nowrap",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                  }}
                >
                  Rule Name
                </th>
                <th
                  style={{
                    backgroundColor: "#f5f9ff",
                    color: "#2a3f66",
                    padding: "12px 40px",
                    textAlign: "center",
                    fontWeight: "700",
                    borderBottom: "2px solid #c4d1f5",
                    position: "sticky",
                    top: 0,
                    zIndex: 2,
                    width: 120,
                  }}
                >
                  Days Inactive
                </th>
              </tr>
            </thead>

            <tbody>
  {displayRules.map((rule, idx) => {
    const inactiveDays = getInactiveDays(rule.impactDiffWithDate);
    const tooltipContent = `${rule.name || "N/A"}\nInactive for ${inactiveDays} day${
      inactiveDays > 1 ? "s" : ""
    }`;

    return (
      <tr
        key={rule.id || idx}
        style={{
          height: 28, 
          backgroundColor: idx % 2 === 0 ? "#fff" : "#f9fbff",
          transition: "background-color 0.3s ease",
          cursor: "default",
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.backgroundColor = "#d6e4ff";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.backgroundColor = idx % 2 === 0 ? "#fff" : "#f9fbff";
        }}
      >
        <td
          style={{
            borderBottom: "1px solid #e5e9f2",
            padding: "6px 10px",  // reduced padding
            color: "#2d3a5a",
            fontSize: 15,
            fontWeight: "500",
            whiteSpace: "nowrap",
            overflow: "hidden",
            textOverflow: "ellipsis",
            maxWidth: 300,
          }}
          title={tooltipContent}
        >
          {rule.name || "N/A"}
        </td>
        <td
          style={{
            borderBottom: "1px solid #e5e9f2",
            padding: "6px 10px",  // reduced padding
            textAlign: "center",
            color: "#4a6dff",
            fontWeight: "600",
            fontSize: 13,
            userSelect: "none",
          }}
          title={tooltipContent}
        >
          {inactiveDays}
        </td>
      </tr>
    );
  })}
</tbody>
          </table>
        </div>
      </div>
    </>
  );
};


in this, only the recent comma should be calculated like if ther still exists you must take recent 31 commas based on the inactive days