ProductCard Component without SRP

ProductCard.jsx

export default function ProductCard() {
  const [product, setProduct] = useState(null);
  const [isAddingToCart, setIsAddingToCart] = useState(false);
  const [error, setError] = useState(null);

  const addToCart = async () => {
    setIsAddingToCart(true);
    try {
      const response = await fetch(`/api/cart/${product.id}`, {
        method: 'POST',
      });
      if (response.ok) {
        setProduct(response.data);
      } else {
        setError("Error adding to cart");
      }
    } catch (error) {
      setError("Error adding to cart");
    } finally {
      setIsAddingToCart(false);
    }
  };

  return (
    <div className="product-card">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>{product.price}</p>
      {isAddingToCart ? (
        <p>Adding to cart...</p>
      ) : error ? (
        <p className="error">{error}</p>
      ) : (
        <button onClick={addToCart}>Add to Cart</button>
      )}
    </div>
  );
}