import Link from "next/link";

export default function ProductCard({ prodId, prodName, categoryName, prodPrice, imageUrl }) {
  return (
    <Link href={`/products/${prodId}`} className="pet-card">
      <div className="pet-card-image-wrapper">
        <img
          src={imageUrl || "/images/pet-placeholder.png"}
          alt={prodName}
          className="pet-card-image"
          onError={(e) => {
            e.currentTarget.onerror = null;
            e.currentTarget.src = "/images/pet-placeholder.png";
          }}
        />
      </div>
      <div className="pet-card-body">
        <h3 className="pet-card-name">{prodName}</h3>
        <p className="pet-card-species">{categoryName}</p>
        {prodPrice != null && (
          <span className="product-card-price">${parseFloat(prodPrice).toFixed(2)}</span>
        )}
      </div>
    </Link>
  );
}