import WarningIconLarge from "../icons/WarningIconLarge"
import XIconSmall from "../icons/XIconSmall";

interface ConfirmRecipeDeleteModalProps {
  cancelHandler: () => void;
  deleteHandler: () => void;

}

export default function ConfirmRecipeDeleteModal({ cancelHandler, deleteHandler }: ConfirmRecipeDeleteModalProps) {

  return (
    <div className="bg-black/25 fixed w-screen h-screen top-0 left-0 flex items-center justify-center select-none">

      <div className="bg-white relative max-w-9/10 md:max-w-1/2 lg:max-w-1/4 rounded-sm broder-gray-300 flex flex-col items-center justify-evenly py-8 px-16 gap-y-4">

        {/* Close button */}
        <button onClick={cancelHandler} className="absolute cursor-pointer top-1 right-1 p-3 duration-100 text-gray-500 hover:text-gray-600">
          <XIconSmall />
        </button>

        <WarningIconLarge />
        <h2 className="text-lg md:text-xl"> Are you sure?</h2>
        <p className="text-gray-600 text-md text-center">
          Are you sure you want to delete this recipe? This action cannot be undone!
        </p>

        <div className="flex gap-x-4">
          <button
            onClick={cancelHandler}
            className="py-2 px-8 bg-gray-200 rounded-sm cursor-pointer duration-300 hover:bg-gray-300"
          >
            Cancel
          </button>
          <button
            onClick={deleteHandler}
            className="py-2 px-8 bg-red-700 text-white rounded-sm cursor-pointer duration-300 hover:bg-red-800"
          >
            Delete
          </button>
        </div>

      </div>
    </div>
  );
}
