import React from "react";

interface ProductCardProps {
  productName: string;
  thumbnailUrl?: string;
  handleToggleClick: () => void;
}

const ProductCard: React.FC<ProductCardProps> = ({
  productName,
  thumbnailUrl,
  handleToggleClick,
}) => {
  return (
    <div className="booking__product">
      <div className="booking__product-image">
        {thumbnailUrl && (
          <img
            src={`${thumbnailUrl}?height=400&width=400`}
            alt={productName}
            className="mediacontent"
          />
        )}
      </div>
      <div className="booking__product-text">
        <h3 className="booking__product-heading">{productName}</h3>
      </div>
      <button
        type="button"
        className="booking__product-toggle"
        onClick={handleToggleClick}
      ></button>
    </div>
  );
};

export default ProductCard;