shoc-frontend-new/src/components/DeleteModal.js

import React from "react";
import { toast } from "react-toastify";

export default function DeleteModal({ 
  isOpen, 
  onClose, 
  onConfirm, 
  title = "Delete Confirmation",
  message = "Are you sure you want to delete this item?",
  loading = false
}) {
  if (!isOpen) return null;

  return (
    <div style={styles.overlay}>
      <div style={styles.modal}>
        <div style={styles.header}>
          <h3 style={styles.title}>{title}</h3>
          <button
            onClick={onClose}
            style={styles.closeBtn}
            disabled={loading}
          >
            ✕
          </button>
        </div>

        <div style={styles.body}>
          <p style={styles.message}>{message}</p>
        </div>

        <div style={styles.actions}>
          <button
            onClick={onClose}
            style={styles.cancelBtn}
            disabled={loading}
          >
            Cancel
          </button>
          <button
            onClick={onConfirm}
            style={styles.deleteBtn}
            disabled={loading}
          >
            {loading ? "Deleting..." : "Delete"}
          </button>
        </div>
      </div>
    </div>
  );
}

const styles = {
  overlay: {
    position: "fixed",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    zIndex: 1000,
  },
  modal: {
    backgroundColor: "#fff",
    borderRadius: "8px",
    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
    maxWidth: "400px",
    width: "90%",
    overflow: "hidden",
  },
  header: {
    backgroundColor: "#f8f9fa",
    padding: "16px 20px",
    borderBottom: "1px solid #ddd",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
  },
  title: {
    margin: 0,
    fontSize: "18px",
    fontWeight: 600,
    color: "#333",
  },
  closeBtn: {
    background: "none",
    border: "none",
    fontSize: "24px",
    cursor: "pointer",
    color: "#666",
    padding: "0",
    width: "32px",
    height: "32px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  body: {
    padding: "20px",
  },
  message: {
    margin: 0,
    fontSize: "14px",
    color: "#666",
    lineHeight: "1.5",
  },
  actions: {
    display: "flex",
    gap: "10px",
    padding: "16px 20px",
    borderTop: "1px solid #ddd",
    backgroundColor: "#f8f9fa",
  },
  cancelBtn: {
    flex: 1,
    padding: "8px 16px",
    fontSize: "14px",
    fontWeight: 500,
    border: "1px solid #ddd",
    borderRadius: "4px",
    backgroundColor: "#fff",
    color: "#333",
    cursor: "pointer",
    transition: "all 0.2s",
  },
  deleteBtn: {
    flex: 1,
    padding: "8px 16px",
    fontSize: "14px",
    fontWeight: 500,
    border: "none",
    borderRadius: "4px",
    backgroundColor: "#dc3545",
    color: "#fff",
    cursor: "pointer",
    transition: "all 0.2s",
  },
};