import React from 'react';
import { useContext } from 'react';
import { langContext } from '../../context/LenguageContext';
import './DiscardConfirmModal.css';

export default function DiscardConfirmModal({ isOpen, message, onConfirm, onCancel }) {
  const { lang } = useContext(langContext);
  
  if (!isOpen) return null;

  return (
    <div className="discard-modal-overlay" onClick={onCancel}>
      <div className="discard-modal-box" onClick={(e) => e.stopPropagation()}>
        <div className="discard-modal-header">
          <h3>{lang === "es" ? "Confirmar descarte" : "Confirm Discard"}</h3>
        </div>
        <div className="discard-modal-body">
          <p>{message}</p>
        </div>
        <div className="discard-modal-actions">
          <button className="discard-modal-button discard-modal-button-cancel" onClick={onCancel}>
            {lang === "es" ? "Cancelar" : "Cancel"}
          </button>
          <button className="discard-modal-button discard-modal-button-confirm" onClick={onConfirm}>
            {lang === "es" ? "Confirmar" : "Confirm"}
          </button>
        </div>
      </div>
    </div>
  );
}

