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

interface ConfirmDeleteDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  confirmButtonText?: string;
  cancelButtonText?: string;
  children: ReactNode;
}

export const ConfirmDeleteDialog = ({
  isOpen,
  onClose,
  onConfirm,
  title,
  confirmButtonText = "Delete",
  cancelButtonText = "Cancel",
  children,
}: ConfirmDeleteDialogProps) => {
  return (
    <div className="relative flex-1 flex flex-col  min-h-0">
      {isOpen && (
        <div className="absolute inset-0 z-60 backdrop-blur-xs bg-black/20 flex items-start justify-center pointer-events-auto pt-[50px]">
          <div className="bg-white rounded-lg border-2 border-[var(--colors-route-active)] p-4 shadow-lg pointer-events-auto w-[90%] flex items-center gap-4">
            <p className="flex-1 text-sm font-semibold text-[#1E1B4B]">
              {title}
            </p>
            <div className="flex items-center gap-2 shrink-0">
              <Button
                onClick={onClose}
                variant="ghost"
                className="text-[#5147E4]! bg-white weight-semibold border-none!"
                type="button"
              >
                {cancelButtonText}
              </Button>
              <Button
                variant="destructive"
                className="bg-[#AD0149] hover:bg-[#AD0149]/90 text-white border-[#AD0149]"
                onClick={onConfirm}
                type="button"
              >
                {confirmButtonText}
              </Button>
            </div>
          </div>
        </div>
      )}
      <div
        className={`flex flex-col flex-1 min-h-0 ${isOpen ? "pointer-events-none" : ""}`}
        style={isOpen ? { filter: "blur(2px)" } : undefined}
      >
        {children}
      </div>
    </div>
  );
};
