import React from "react";
import { FwToggle } from "@freshworks/crayons/react";

const calculateLastModified = (updated_at) => {
  const updatedDate = new Date(updated_at);
  const currentDate = new Date();

  const diffInMilliseconds = currentDate - updatedDate;
  const seconds = Math.floor(diffInMilliseconds / 1000);
  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);
  const days = Math.floor(hours / 24);
  const months = Math.floor(days / 30); 
  const years = Math.floor(days / 365); 

  if (years > 0) {
    return years === 1 ? "a year ago" : `${years} years ago`;
  } else if (months > 0) {
    return months === 1 ? "a month ago" : `${months} months ago`;
  } else if (days > 0) {
    return `${days} day${days > 1 ? "s" : ""} ago`;
  } else if (hours > 0) {
    return `${hours} hour${hours > 1 ? "s" : ""} ago`;
  } else if (minutes > 0) {
    return `${minutes} minute${minutes > 1 ? "s" : ""} ago`;
  } else {
    return "Just now";
  }
};

const AutomationCard = ({ rule = {}, index, isFirstInGroup = false }) => {
  const {
    name = "Default Rule Name",
    description = "Default Rule Description",
    updated_at = "N/A",
    last_updated_by = "Unknown",
    affected_tickets_count = "--",
    active = false,
    position = position
  } = rule;

  return (
    <div
      className="fw-card-1 fw-flex fw-flex-column"
      style={{
        overflow: "hidden",
        border: "0.5px solid #ddd",
        backgroundColor: isFirstInGroup ? "#43e955" : "#ff4d00",
      }}
    >
      <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">{description}</p>
       </div>

        <div style={{ padding: "8px 16px" }}>
          <FwToggle size="medium" checked={active} />
        </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: {last_updated_by}</span>
          <span>|</span>
          <span>Impacted tickets (Last 7 days): {affected_tickets_count}</span>
        </div>
      </section>
    </div>
  );
};

export default AutomationCard;

in this react js component, instead of toggle, use 

<fw-data-table id="datatable-actions"  is-selectable="true" is-all-selectable="true" label="Data table Row Actions">
  </fw-data-table>

  <script type="application/javascript">
    var data = {
      columns: [{
        "key": "name",
        "text": "Name"
      }, {
        "key": "role",
        "text": "Role"
      }],
      rows: [{
        "id": "0001",
        "name": "Alexander Goodman",
        "role": "Member"
      }, {
        "id": "0002",
        "name": "Ambrose Wayne",
        "role": "Member"
      }, {
        "id": "0003",
        "name": "August hines",
        "role": "Administrator"
      }],
      rowActions: [{
        "name": "Alert",
        "handler": (rowData) => {
          window.alert(rowData.name);
        },
        "graphicsProps": { name: 'alert' }      
        }, {
        "name": "Delete",
        "handler": async (rowData) => {
          let deletePromise = new Promise((resolve, reject) => {
            const dataTable = document.querySelector('#datatable-actions');
            setTimeout(() => {
              if (dataTable) {
                dataTable.rows = dataTable.rows.filter((row) => (row.id !== rowData.id));
                resolve();
              } else {
                reject();
              }
            }, 3000); 
          });
          await deletePromise;
        },
        "hideForRowIds": ["0003"],
        "graphicsProps": { name: 'delete' }      
      }]
    }

    var datatableActions = document.getElementById('datatable-actions');
    datatableActions.columns = data.columns;
    datatableActions.rows = data.rows;
    datatableActions.rowActions = data.rowActions;
    datatableActions.showRowActionsAsMenu = true;
    datatableActions.rowActionsMenuVariant = "icon";
    datatableActions.rowActionsHeaderLabel = "";
  </script>

Delete as it is from this code