type Product = {
    id: string;
    name: string;
    image_url: string;
    brand: { name: string };
    description?: string;
    price?: number;
    vendor?: string;
  };
  
  export function ProductCard({ product }: { product: Product }) {
    return (
      <div className="border rounded-xl p-4 shadow hover:shadow-md transition">
        <img
          src={product.image_url}
          alt={product.name}
          className="w-full h-40 object-contain mb-4"
        />
        <h3 className="text-lg font-semibold">{product.name}</h3>
        <p className="text-sm text-gray-500">{product.brand?.name}</p>
        {product.price && (
          <p className="text-md font-bold mt-2">${product.price.toFixed(2)}</p>
        )}
      </div>
    );
  }