'use client';

interface ConfirmationModalProps {
  isOpen: boolean;
  title?: string;
  message: string;
  onConfirm: () => void;
  onCancel: () => void;
}

export default function ConfirmationModal({
  isOpen,
  title,
  message,
  onConfirm,
  onCancel,
}: ConfirmationModalProps) {
  if (!isOpen) return null;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
      onClick={onCancel}
    >
      <div
        className="bg-white border border-gray-300 rounded-lg shadow-lg p-6 w-80 text-center"
        onClick={(e) => e.stopPropagation()}
      >
        {title && (
          <h3 className="text-lg font-semibold text-gray-900 mb-3">{title}</h3>
        )}
        <p className="mb-6 text-gray-800 font-medium">{message}</p>
        <div className="flex justify-center gap-4">
          <button
            onClick={onConfirm}
            className="bg-red-500 hover:bg-red-600 text-white font-medium py-1.5 px-6 rounded-lg transition-colors"
          >
            Löschen
          </button>
          <button
            onClick={onCancel}
            className="bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium py-1.5 px-6 rounded-lg transition-colors"
          >
            Abbrechen
          </button>
        </div>
      </div>
    </div>
  );
}