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

export default function ConfirmationDialog({
  isOpen,
  title,
  message,
  confirmText = 'Confirm',
  cancelText = 'Cancel',
  onConfirm,
  onCancel
}: ConfirmationDialogProps) {
  if (!isOpen) return null;

  return (
    <>
      {/* Backdrop */}
      <div
        style={{
          position: 'fixed',
          inset: 0,
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          zIndex: 9998,
          backdropFilter: 'blur(2px)'
        }}
        onClick={onCancel}
      />

      {/* Dialog */}
      <div
        style={{
          position: 'fixed',
          left: '50%',
          top: '50%',
          transform: 'translate(-50%, -50%)',
          backgroundColor: '#ffffff',
          borderRadius: '10px',
          padding: '24px',
          minWidth: '400px',
          maxWidth: '500px',
          zIndex: 9999,
          boxShadow: '0 10px 40px rgba(0, 0, 0, 0.2)'
        }}
      >
        {/* Title */}
        <h2
          style={{
            margin: '0 0 12px 0',
            fontSize: '20px',
            fontWeight: '600',
            color: '#32343d',
            fontFamily: 'Inter, sans-serif'
          }}
        >
          {title}
        </h2>

        {/* Message */}
        <p
          style={{
            margin: '0 0 24px 0',
            fontSize: '16px',
            color: '#545865',
            fontFamily: 'Inter, sans-serif',
            lineHeight: '1.5'
          }}
        >
          {message}
        </p>

        {/* Buttons */}
        <div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
          {/* Cancel Button */}
          <button
            onClick={onCancel}
            style={{
              padding: '10px 20px',
              fontSize: '16px',
              fontWeight: '500',
              fontFamily: 'Inter, sans-serif',
              color: '#545865',
              backgroundColor: '#f8f9fa',
              border: 'none',
              borderRadius: '7px',
              cursor: 'pointer',
              transition: 'background-color 0.15s ease-in-out'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.backgroundColor = '#e9ecef';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = '#f8f9fa';
            }}
          >
            {cancelText}
          </button>

          {/* Confirm Button */}
          <button
            onClick={onConfirm}
            style={{
              padding: '10px 20px',
              fontSize: '16px',
              fontWeight: '500',
              fontFamily: 'Inter, sans-serif',
              color: '#ffffff',
              backgroundColor: '#3faee6',
              border: 'none',
              borderRadius: '7px',
              cursor: 'pointer',
              transition: 'background-color 0.15s ease-in-out'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.backgroundColor = '#2e9dd4';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = '#3faee6';
            }}
          >
            {confirmText}
          </button>
        </div>
      </div>
    </>
  );
}