type ProductEvent =
  | 'Product Viewed'
  | 'Product Added'
  | 'Product Removed'
  | 'Product Updated'
  | 'Category Viewed';

type Product = {
  id: string;
  name: string;
  price: number;
  category?: string;
  sku?: string;
  quantity?: number;
  variant?: string;
  brand?: string;
  metadata?: Record<string, any>;
};

import { track } from '@bilyai/browser';

track('Product Viewed', {
  products: [{
    id: 'prod_123',
    name: 'Wireless Headphones',
    price: 99.99,
    category: 'Electronics',
    brand: 'AudioTech'
  }]
});

track('Category Viewed', {
  category: 'Electronics',
  sourceUrl: window.location.href
});

function ProductCard({ product }) {
  const bily = useBily();

  const handleViewDetails = () => {
    bily.track('Product Viewed', {
      products: [{
        id: product.id,
        name: product.name,
        price: product.price,
        category: product.category,
        brand: product.brand
      }]
    });
  };

  return (
    <div onClick={handleViewDetails}>
      <h2>{product.name}</h2>
      <p>${product.price}</p>
      <button>View Details</button>
    </div>
  );
}