/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useState } from 'react';
import styles from "./role.module.scss";
import DeleteModal from '../../modals/delete-modal';
import CreateProgramModal from '../../modals/create-program-modal';

interface RoleProps {
  role: any;
}

const Role: React.FC<RoleProps> = ({ role }) => {
  const { name, description} = role;

  const [deleteModal, setDeleteModal] = useState(false);
  const [updateModal, setUpdateModal] = useState(false);

  return (
    <>
      {deleteModal && <DeleteModal closeModal={() => setDeleteModal(false)} deleteUrl={route("program_delete", role.id)} // 👈 actual route helper
  onSuccess={() => console.log("Deleted successfully")} />}
      {updateModal && (
        <CreateProgramModal
          program={role}
          type="update"
          closeModal={() => setUpdateModal(false)}
        />
      )}

      <div className={styles["role"]}>
        <span>{name}</span>
        <span>{description}</span>
        <div className={styles["role--actions"]}>
          <span
            onClick={() => setUpdateModal(true)}
            className={styles["role--actions--update"]}
          >
            Update
          </span>
          <span
            onClick={() => setDeleteModal(true)}
            className={styles["role--actions--delete"]}
          >
            Delete
          </span>
        </div>
      </div>
    </>
  );
};

export default Role;