import "../../styles/SimilarItemModal.css";

export default function SimilarItemModal({ originalName, suggestedName, onCancel, onNo, onYes }) {
  return (
    <div className="modal-overlay" onClick={onCancel}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <h2 className="modal-title">Similar Item Found</h2>
        <p className="text-center text-lg mb-4">
          Instead of <strong className="similar-item-original">"{originalName.toLowerCase()}"</strong>, use <strong className="similar-item-suggested">"{suggestedName}"</strong>?
        </p>

        <div className="similar-modal-actions">
          <button onClick={onYes} className="btn btn-success">
            Yes, Use Suggestion
          </button>
          <button onClick={onNo} className="btn btn-primary">
            No, Create New
          </button>
          <button onClick={onCancel} className="btn btn-danger">
            Cancel
          </button>
        </div>
      </div>
    </div>
  );
}