import React from 'react';
import { FaTrash, FaTimesCircle } from 'react-icons/fa'; // Icons

export default function ConfirmModal({ message, onConfirm, onCancel, isOpen, isDeleting }) {

    // ใช้ open={isOpen} ใน <dialog> เพื่อควบคุมการแสดงผล
    if (!isOpen) return null;

    return (
        // Div ครอบคลุมจอทั้งหมด (Backdrop)
        <div className="fixed inset-0 bg-gray-300 bg-opacity-30 z-[110] flex justify-center items-center p-4">
            <dialog className="modal modal-open" open={isOpen}>
                <div className="modal-box max-w-md bg-white p-6 shadow-2xl rounded-lg">

                    {/* Header/Title */}
                    <h3 className="font-bold text-xl text-error flex items-center">
                        <FaTimesCircle className="h-6 w-6 mr-2" />
                        ยืนยันการลบข้อมูล
                    </h3>

                    {/* Message Body */}
                    <p className="py-4 text-gray-700 whitespace-normal break-words">{message}</p>

                    {/* Action Buttons */}
                    <div className="modal-action">
                        {/* ปุ่มยกเลิก */}
                        <button
                            className="btn btn-ghost"
                            onClick={onCancel}
                            disabled={isDeleting}
                        >
                            ยกเลิก
                        </button>

                        {/* ปุ่มยืนยันการลบ */}
                        <button
                            // ใช้ isDeleting เพื่อแสดง Loading Spinner
                            className={"btn btn-error " + (isDeleting ? 'loading' : '')}
                            onClick={onConfirm}
                            disabled={isDeleting}
                        >
                            {isDeleting ? 'กำลังดำเนินการ...' : 'ยืนยันการลบ'}
                            <FaTrash className="w-4 h-4 ml-2" />
                        </button>
                    </div>
                </div>
            </dialog>
        </div>
    );
}