// return (
  //   <>
  //     <div
  //       className="fw-card-1 fw-flex fw-flex-column"
  //       style={{
  //         overflow: "hidden",
  //         border: "0.5px solid #ddd",
  //         backgroundColor: isFirstInGroup ? "#fff" : "#e5f2fd",
  //         cursor: "pointer",
  //         userSelect: "none",
  //       }}
  //       onClick={openSummary}
  //     >
  //       <section
  //         className="fw-flex-grow fw-px-16 fw-flex fw-flex-row"
  //         style={{ justifyContent: "space-between", alignItems: "center" }}
  //         onClick={stopPropagation}
  //       >
  //         <div style={{ paddingLeft: "16px" }}>
  //           <h5 className="fw-type-h2 fw-mt-0 fw-mb-8">
  //             {position}. {name}
  //           </h5>
  //           <p className="fw-type-xs fw-mt-0 fw-mb-20">{generateSummary(rule.summary)}</p>
  //         </div>

  //         <div
  //           style={{
  //             display: "flex",
  //             alignItems: "center",
  //             gap: "8px",
  //             padding: "8px 16px",
  //             position: "relative",
  //           }}
  //           onClick={stopPropagation}
  //         >
  //           <FwToggle size="medium" checked={active} />
  //           <div style={{ position: "relative" }}>
  //             {menuOpen && (
  //               <div
  //                 className="dropdown-menu"
  //                 style={{
  //                   position: "absolute",
  //                   marginTop: "30px",
  //                   top: "50%",
  //                   right: "40px",
  //                   transform: "translateY(-50%)",
  //                   background: "white",
  //                   boxShadow: "0px 4px 6px rgba(0,0,0,0.1)",
  //                   borderRadius: "5px",
  //                   padding: "8px 0",
  //                   width: "120px",
  //                   zIndex: 10,
  //                 }}
  //               >
  //                 <div
  //                   style={{
  //                     padding: "8px 16px",
  //                     cursor: "pointer",
  //                     textAlign: "left",
  //                   }}
  //                   onClick={() => alert("Edit clicked")}
  //                 >
  //                   Edit
  //                 </div>
  //                 <div
  //                   style={{
  //                     padding: "8px 16px",
  //                     cursor: "pointer",
  //                     color: "red",
  //                     textAlign: "left",
  //                   }}
  //                   onClick={() => {
  //                     handleConfirmDelete();
  //                   }}
  //                 >
  //                   Delete
  //                 </div>
  //               </div>
  //             )}
  //             <div
  //               className="ember-basic-dropdown-trigger"
  //               role="button"
  //               tabIndex="0"
  //               onClick={(e) => {
  //                 e.stopPropagation(); // Prevent triggering openSummary
  //                 setMenuOpen(!menuOpen);
  //               }}
  //             >
  //               <svg
  //                 xmlns="http://www.w3.org/2000/svg"
  //                 width="16"
  //                 height="16"
  //                 viewBox="0 0 24 24"
  //                 className="app-icon dropdown-toggle"
  //               >
  //                 <path
  //                   fillRule="evenodd"
  //                   d="M12 5c-1.38 0-2.5-1.12-2.5-2.5S10.62 0 12 0s2.5 1.12 2.5 2.5S13.38 5 12 5zM12 14c-1.38 0-2.5-1.12-2.5-2.5S10.62 9 12 9s2.5 1.12 2.5 2.5S13.38 14 12 14zM12 24c-1.38 0-2.5-1.12-2.5-2.5S10.62 19 12 19s2.5 1.12 2.5 2.5S13.38 24 12 24z"
  //                 ></path>
  //               </svg>
  //             </div>
  //           </div>
  //         </div>
  //       </section>

  //       <section
  //         className="fw-type-xs fw-flex fw-flex-row fw-items-center options"
  //         style={{
  //           width: "100%",
  //           background: "#f5f5f5",
  //           padding: "10px 16px",
  //           borderRadius: "5px",
  //         }}
  //       >
  //         <div
  //           style={{
  //             display: "flex",
  //             alignItems: "center",
  //             justifyContent: "space-evenly",
  //             width: "100%",
  //             fontSize: "14px",
  //             color: "#666",
  //             textAlign: "center",
  //           }}
  //         >
  //           <span>
  //             Last Modified: <strong>{calculateLastModified(updated_at)}</strong>
  //           </span>
  //           <span>|</span>
  //           <span>By: {renderAgentName()}</span>
  //           <span>|</span>
  //           <span>Impacted tickets (Last 7 days): {affected_tickets_count}</span>
  //         </div>
  //       </section>
  //     </div>
  //   </>
  // );


  return (
    <div
      className="fw-card-1 fw-flex fw-flex-column"
      style={{
        overflow: "hidden",
        border: "0.5px solid #ddd",
        backgroundColor: isFirstInGroup ? "#fff" : "#e5f2fd",
      }}
    >
      <section
        className="fw-flex-grow fw-px-16 fw-flex fw-flex-row"
        style={{ justifyContent: "space-between", alignItems: "center" }}
      >
        <div style={{ paddingLeft: "16px" }}>
          <h5 className="fw-type-h2 fw-mt-0 fw-mb-8">
            {position}. {name}
          </h5>
<p className="fw-type-xs fw-mt-0 fw-mb-20">{generateSummary(rule.summary)}</p>
        </div>

        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: "8px",
            padding: "8px 16px",
            position: "relative",
          }}
        >
          <FwToggle size="medium" checked={active} />
          <div style={{ position: "relative" }}>
            {menuOpen && (
              <div
                className="dropdown-menu"
                style={{
                  position: "absolute",
                  marginTop: "30px",
                  top: "50%",
                  right: "40px",
                  transform: "translateY(-50%)",
                  background: "white",
                  boxShadow: "0px 4px 6px rgba(0,0,0,0.1)",
                  borderRadius: "5px",
                  padding: "8px 0",
                  width: "120px",
                  zIndex: 10,
                }}
              >
                <div
                  style={{
                    padding: "8px 16px",
                    cursor: "pointer",
                    textAlign: "left",
                  }}
                  onClick={() => alert("Edit clicked")}
                >
                  Edit
                </div>
                <div
                  style={{
                    padding: "8px 16px",
                    cursor: "pointer",
                    color: "red",
                    textAlign: "left",
                  }}
                  onClick={() => {                  
                    handleConfirmDelete(); 
                  }}
                >
                  Delete
                </div>
              </div>
            )}
            <div
              className="ember-basic-dropdown-trigger"
              role="button"
              tabIndex="0"
              onClick={() => setMenuOpen(!menuOpen)}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                className="app-icon dropdown-toggle"
              >
                <path
                  fillRule="evenodd"
                  d="M12 5c-1.38 0-2.5-1.12-2.5-2.5S10.62 0 12 0s2.5 1.12 2.5 2.5S13.38 5 12 5zM12 14c-1.38 0-2.5-1.12-2.5-2.5S10.62 9 12 9s2.5 1.12 2.5 2.5S13.38 14 12 14zM12 24c-1.38 0-2.5-1.12-2.5-2.5S10.62 19 12 19s2.5 1.12 2.5 2.5S13.38 24 12 24z"
                ></path>
              </svg>
            </div>
          </div>
        </div>
      </section>

      <section
        className="fw-type-xs fw-flex fw-flex-row fw-items-center options"
        style={{
          width: "100%",
          background: "#f5f5f5",
          padding: "10px 16px",
          borderRadius: "5px",
        }}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-evenly",
            width: "100%",
            fontSize: "14px",
            color: "#666",
            textAlign: "center",
          }}
        >
          <span>
            Last Modified: <strong>{calculateLastModified(updated_at)}</strong>
          </span>
          <span>|</span>
          <span>By: {renderAgentName()}</span>
          <span>|</span>
          <span>
            Impacted tickets (Last 7 days): {affected_tickets_count}
          </span>
        </div>
      </section>
    
    </div>
  );

whats the difference between these two return