/**
 * ItemGrid – generic grid of items (primitive)
 *
 * Domain-agnostic: accepts any items[] and onItemClick. Renders ItemCard by default
 * or custom renderItem. Use for search hits, section blocks, docs, articles; for
 * product-only lists use ProductGrid.
 */
import React from 'react';
import { clsx } from 'clsx';
import { ItemCard } from './ItemCard';
import { useResponsiveColumns, useResponsiveGap, useResponsivePadding } from '../../utils/responsive';
const SPACING = {
    xs: 4,
    sm: 8,
    md: 12,
    lg: 16,
    xl: 24,
};
const defaultGridStyle = {
    display: 'grid',
    gap: SPACING.md,
    padding: SPACING.md,
};
function toGenericItem(item, getItemId, getItemTitle, getItemImage, getItemDescription, getItemUrl) {
    return {
        id: getItemId(item),
        title: getItemTitle(item),
        image: getItemImage?.(item),
        description: getItemDescription?.(item),
        url: getItemUrl?.(item),
        ...(typeof item === 'object' && item !== null ? item : {}),
    };
}
export function ItemGrid({ items, onItemClick, getItemId = (i) => i.id, getItemTitle = (i) => i.title, getItemImage = (i) => i.image, getItemDescription = (i) => i.description, getItemUrl = (i) => i.url, renderItem, maxItems = 24, columns = 4, className, style, gridClassName, }) {
    // Responsive columns and spacing
    const responsiveColumns = useResponsiveColumns(columns);
    const responsiveGap = useResponsiveGap(SPACING.md);
    const responsivePadding = useResponsivePadding(SPACING.md);
    const slice = items.slice(0, maxItems);
    if (slice.length === 0)
        return null;
    const gridStyle = {
        display: 'grid',
        gap: responsiveGap,
        padding: responsivePadding,
        gridTemplateColumns: `repeat(${responsiveColumns}, minmax(0, 1fr))`,
    };
    return (React.createElement("div", { className: clsx('seekora-item-grid', className), style: style },
        React.createElement("div", { className: clsx('seekora-item-grid-inner', gridClassName), style: gridStyle }, slice.map((item, i) => {
            if (renderItem)
                return React.createElement(React.Fragment, { key: getItemId(item) }, renderItem(item, i));
            const generic = toGenericItem(item, getItemId, getItemTitle, getItemImage, getItemDescription, getItemUrl);
            return (React.createElement(ItemCard, { key: generic.id, item: generic, position: i, onSelect: onItemClick ? () => onItemClick(item, i) : undefined }));
        }))));
}
