import Link from "next/link";

export default function ProductProfile({ prodName, categoryName, prodDesc, prodPrice, imageUrl }) {
  return (
    <div className="pet-detail-card">
      <div className="pet-detail-image-wrapper">
        <img
          src={imageUrl || "/images/pet-placeholder.png"}
          alt={prodName}
          className="pet-detail-image"
          onError={(e) => {
            e.currentTarget.onerror = null;
            e.currentTarget.src = "/images/pet-placeholder.png";
          }}
        />
      </div>

      <div className="pet-detail-info">
        <div className="pet-detail-header">
          <h1 className="pet-detail-name">{prodName}</h1>
        </div>

        <div className="pet-detail-fields">
          <div className="pet-detail-row">
            <span className="pet-detail-label">Category</span>
            <span className="pet-detail-value">{categoryName ?? "—"}</span>
          </div>
          <div className="pet-detail-row">
            <span className="pet-detail-label">Price</span>
            <span className="pet-detail-value pet-detail-price">
              {prodPrice != null ? `$${parseFloat(prodPrice).toFixed(2)}` : "—"}
            </span>
          </div>
          <div className="pet-detail-row">
            <span className="pet-detail-label">Description</span>
            <span className="pet-detail-value">{prodDesc ?? "—"}</span>
          </div>
        </div>
      </div>
    </div>
  );
}