import React, { useState } from 'react';
import { useCart } from '../hooks';

export default function ProductCard({ product }) {
  const { addItem, cart } = useCart();
  const [added, setAdded] = useState(false);

  const handleAdd = () => {
    addItem(product);
    setAdded(true);
  };

  return (
    <div className="card">
      <h3>{product.name}</h3>
      <button onClick={handleAdd}>
        {added ? '✓ Added' : 'Add to Cart'}
      </button>
    </div>
  );
}