import React from 'react'
import { useNavigate } from 'react-router-dom'
import '../styles/global.css'

export default function AddToCartModal({ isOpen, onClose, productName }) {
  const navigate = useNavigate()

  if (!isOpen) return null

  const handleGoToCart = () => {
    navigate('/cart')
    onClose()
  }

  const handleContinueShopping = () => {
    onClose()
  }

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content cart-modal" onClick={(e) => e.stopPropagation()}>
        <div className="cart-modal-icon">✓</div>
        <h2>Added to Cart!</h2>
        <p className="cart-modal-message">{productName} has been added to your cart</p>
        <div className="cart-modal-actions">
          <button className="btn btn-secondary" onClick={handleContinueShopping}>
            Continue Shopping
          </button>
          <button className="btn" onClick={handleGoToCart}>
            Go to Cart
          </button>
        </div>
      </div>
    </div>
  )
}
