/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from './modal.module.scss'

interface DeleteConfirmationProps {
  closeModal: any;
  handleDelete: any;
  item: any;
}

const DeleteConfirmation = ({ closeModal, handleDelete, item }: DeleteConfirmationProps) => {
  const { title } = item
  return (
    <div className={styles['dash__modal']}>
      <div className={styles['dash__modal__content']}>
        <div onClick={closeModal} className={styles['dash__modal__content--close']}>
          Close
        </div>
        <div className={styles['dash__modal__content--details']}>
          <div className={styles['dash__modal__content--details--header']}>
            <div className={styles['dash__modal__content--details--header--helper']}>
              Confirmation Prompt{' '}
            </div>
            <h2>Confirm Delete Request</h2>
            <p>
              Dear Achilles Usuoyibo, you are about to delete a message from your account manager
              with title <strong>{title}</strong>. Please be sure before proceeding with this
              request.
            </p>
            <button onClick={handleDelete}>Confirm Action</button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default DeleteConfirmation