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;