components/DeleteConfirmModal.js

import { X, AlertTriangle } from 'lucide-react';

export default function DeleteConfirmModal({ isOpen, onClose, onConfirm, title, message }) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto">
      <div className="flex min-h-full items-center justify-center p-4">
        <div className="fixed inset-0 bg-neutral-900/50 transition-opacity" onClick={onClose} />
        
        <div className="relative bg-white rounded-xl shadow-xl max-w-sm w-full animate-fadeIn">
          <div className="p-6">
            <div className="flex items-center gap-3 mb-4">
              <div className="p-2 bg-expense-light rounded-lg">
                <AlertTriangle className="w-5 h-5 text-expense-dark" />
              </div>
              <h3 className="text-lg font-semibold text-neutral-800">{title}</h3>
            </div>
            <p className="text-neutral-600 mb-6">{message}</p>
            <div className="flex gap-3">
              <button onClick={onClose} className="btn-secondary flex-1">
                Cancel
              </button>
              <button onClick={onConfirm} className="btn-danger flex-1">
                Delete
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}