costco-grocery-list/frontend/src/components/modals/SimilarItemModal.jsx
2026-01-24 21:10:57 -08:00

27 lines
1001 B
JavaScript

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>
);
}