import React from "react";
import { Button } from "@/components/ui/button";

interface DeleteConfirmationModalProps {
  show: boolean;
  onConfirm: () => void;
  onCancel: () => void;
  message: string;
}

const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps> = ({
  show,
  onConfirm,
  onCancel,
  message,
}) => {
  if (!show) {
    return null;
  }

  return (
    <div className="absolute top-0 left-0 w-full h-full bg-black/50 z-50 flex items-center justify-center">
      <div className="bg-white/90 p-8 rounded-lg max-w-[480px]">
        <h1 className="text-red-1 text-[19px] font-semibold mb-4">{message}</h1>
        <p className="text-grey-1">
          This action cannot be undone. This will permanently delete this image.
        </p>
        <div className="flex gap-4 mt-4">
          <Button
            type="button"
            onClick={onConfirm}
            className="bg-red-500 text-white hover:bg-red-1"
          >
            Yes
          </Button>
          <Button
            type="button"
            onClick={onCancel}
            className="bg-blue-500 text-white hover:bg-blue-1"
          >
            No
          </Button>
        </div>
      </div>
    </div>
  );
};

export default DeleteConfirmationModal;