// components/Modals/ConfirmationModal.jsx
import React from 'react';
import './ConfirmationModal.css'; // Estilos separados
import { useContext } from 'react';
import { langContext } from '../../context/LenguageContext';

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

  return (
    <div className="modal-overlay">
      <div className="modal">
        <div className="modal-header">
          <h3>{lang === "en" ? "Confirm the status change" : "Confirmar el cambio de estado"}</h3>
          <button className="close-button" onClick={onCancel}>×</button>
        </div>
        <div className="modal-body">
          <p>{lang === "en" ? "Are you sure you received" : "¿Estás seguro de que recibiste"} "{statusType}"?</p>
          <div className="modal-buttons">
            <button className="modal-button yes" onClick={onConfirm}>{lang === "en" ? "YES" : "SÍ"}</button>
            <button className="modal-button no" onClick={onCancel}>{lang === "en" ? "NO" : "NO"}</button>
          </div>
        </div>
      </div>
    </div>
  );
}
