"use client";

import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";

interface DeleteAddressModalProps {
    open: boolean;
    onClose: () => void;
    onConfirm: () => void;
    loading?: boolean;
}

export default function DeleteAddressModal({
    open,
    onClose,
    onConfirm,
    loading = false,
}: DeleteAddressModalProps) {

    if (!open) return null;

    return (
        <div className="fixed inset-0 z-[9999] flex items-center justify-center px-5">

            {/* Overlay */}
            <div
                className="
                    absolute
                    inset-0
                    bg-black/50
                "
                onClick={onClose}
            />
            <div
                className="
                    relative
                    z-10
                    w-full
                    max-w-md
                    rounded-xl
                    bg-white
                    p-6
                    shadow-xl
                "
            >
                <button
                    onClick={onClose}
                    className="
                        absolute
                        right-4
                        top-4
                        text-gray-400
                        hover:text-black
                    "
                >
                    <CloseOutlinedIcon />
                </button>
                <div
                    className="
                        mx-auto
                        flex
                        h-16
                        w-16
                        items-center
                        justify-center
                        rounded-full
                        bg-secondary/10
                        text-secondary
                    "
                >
                    <DeleteOutlineOutlinedIcon fontSize="large" />
                </div>
                <div className="mt-5 text-center">

                    <h2 className="text-xl font-semibold text-primary">
                        Delete Address?
                    </h2>

                    <p className="mt-2 text-sm leading-6 text-gray-500">
                        Are you sure you want to delete this address?
                        This action cannot be undone.
                    </p>
                </div>
                <div className="mt-6 flex gap-3">

                    <button
                        onClick={onClose}
                        className="
                            flex-1
                            rounded-md
                            border
                            border-gray-300
                            py-3
                            text-sm
                            font-semibold
                            text-primary
                            transition
                            hover:bg-gray-100
                        "
                    >
                        Cancel
                    </button>
                    <button
                        onClick={onConfirm}
                        disabled={loading}
                        className="
                            flex-1
                            rounded-md
                            bg-secondary
                            py-3
                            text-sm
                            font-semibold
                            text-white
                            transition
                            hover:bg-secondary
                            disabled:opacity-50
                        "
                    >
                        {loading ? "Deleting..." : "Delete"}
                    </button>
                </div>
            </div>
        </div>
    );
}