/**
 * ProductGrid – grid of product cards from context (primitive)
 *
 * Uses trendingProducts or active tab products; each click calls context selectProduct.
 */
import React, { useMemo } from 'react';
import { useSuggestionsContext } from './SuggestionsContext';
import { ProductCard } from './ProductCard';
import { clsx } from 'clsx';
import { useResponsiveColumns, useResponsiveGap, useResponsivePadding } from '../../utils/responsive';
export function ProductGrid({ maxItems = 8, source = 'trending', columns = 4, className, style, gridClassName, displayConfig, onVariantHover, }) {
    const { trendingProducts, filteredTabs, activeTabId, selectProduct, getAllNavigableItems, } = useSuggestionsContext();
    // Responsive columns and spacing
    const responsiveColumns = useResponsiveColumns(columns);
    const responsiveGap = useResponsiveGap(12);
    const responsivePadding = useResponsivePadding(12);
    const products = useMemo(() => {
        if (source === 'trending')
            return trendingProducts;
        const tab = filteredTabs.find((t) => t.id === (source === 'tab' ? activeTabId : source));
        return tab?.products ?? [];
    }, [source, activeTabId, trendingProducts, filteredTabs]);
    const items = products.slice(0, maxItems);
    const navigableItems = getAllNavigableItems();
    const productStartIndex = navigableItems.findIndex((n) => n.type === 'product');
    if (items.length === 0)
        return null;
    const gridStyle = {
        display: 'grid',
        gridTemplateColumns: `repeat(${responsiveColumns}, minmax(0, 1fr))`,
        gap: responsiveGap,
        padding: responsivePadding,
    };
    return (React.createElement("div", { className: clsx('seekora-suggestions-product-grid', className), style: style },
        React.createElement("div", { className: clsx('seekora-suggestions-product-grid-inner', gridClassName), style: gridStyle }, items.map((product, i) => {
            const globalIndex = productStartIndex >= 0 ? productStartIndex + i : i;
            const section = source === 'trending' ? 'products' : 'filtered_tab';
            const tabId = source !== 'trending' ? (source === 'tab' ? activeTabId : source) : undefined;
            return (React.createElement(ProductCard, { key: product.id ?? product.objectID ?? i, product: product, position: globalIndex, section: section, tabId: tabId, onSelect: () => selectProduct(product, globalIndex, section, tabId), displayConfig: displayConfig, onVariantHover: onVariantHover }));
        }))));
}
