/**
 * ItemCard – generic item tile (primitive)
 *
 * Domain-agnostic: works for docs, articles, products, or any hit with id, title,
 * optional description, image, url. Overridable via className/style. Use for
 * search results, section blocks, or any list; for e-commerce products use ProductCard.
 */
import React from 'react';
import { clsx } from 'clsx';
import { ImageDisplay } from '../primitives/ImageDisplay';
import { ActionButtons } from '../primitives/ActionButtons';
import { useIsMobile, useResponsiveGap } from '../../utils/responsive';
const TRANSITIONS = {
    fast: '150ms ease-in-out',
    normal: '200ms ease-in-out',
    slow: '300ms ease-in-out',
};
const BORDER_RADIUS = {
    sm: 4,
    md: 6,
    lg: 8,
    full: 9999,
};
const cardStyle = {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
    padding: 8,
    cursor: 'pointer',
    border: 'none',
    borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS.md}px)`,
    backgroundColor: 'transparent',
    textAlign: 'left',
    fontSize: 'inherit',
    fontFamily: 'inherit',
    transition: `background-color ${TRANSITIONS.fast}, box-shadow ${TRANSITIONS.fast}`,
};
const imgStyle = {
    width: '100%',
    aspectRatio: 'var(--seekora-card-aspect-ratio, 1)',
    objectFit: 'cover',
    borderRadius: BORDER_RADIUS.sm,
    backgroundColor: 'var(--seekora-bg-secondary, rgba(0,0,0,0.04))',
    display: 'block',
    overflow: 'hidden',
};
export function ItemCard({ item, position, onSelect, className, style, asLink = true, imageVariant = 'single', layout = 'vertical', actionButtons, actionButtonsPosition = 'overlay-top-right', showActionLabels = false, }) {
    const images = item.images?.length ? item.images : item.image ?? item.imageUrl ? [String(item.image ?? item.imageUrl)] : [];
    const title = item.title ?? item.primaryText ?? '';
    const description = item.description ?? item.secondaryText;
    const href = item.url;
    const isMobile = useIsMobile();
    const horizontalGap = useResponsiveGap(12);
    const isHorizontal = layout === 'horizontal';
    const [isHovered, setIsHovered] = React.useState(false);
    // Responsive dimensions for horizontal layout
    const imageMinWidth = isMobile ? 60 : 80;
    const imageMaxWidth = isMobile ? 100 : 120;
    const imageFlex = isMobile ? '20%' : '20%';
    const imageHeight = isMobile ? 60 : 80;
    // Responsive font sizes
    const titleFontSize = isMobile ? '0.9375rem' : '0.875rem';
    const descriptionFontSize = isMobile ? '0.875rem' : '0.8125rem';
    const textGap = isMobile ? 6 : 4;
    const lineClamp = isMobile ? 3 : 2; // More lines on mobile
    // Hover style
    const cardHoverStyle = isHovered
        ? {
            backgroundColor: 'var(--seekora-card-hover-bg, var(--seekora-bg-hover, rgba(0,0,0,0.03)))',
            boxShadow: 'var(--seekora-card-hover-shadow, 0 2px 8px rgba(0, 0, 0, 0.08))',
        }
        : {};
    const imageBlock = images.length > 0 ? (React.createElement("div", { style: { position: 'relative', overflow: 'hidden', borderRadius: 4, ...(isHorizontal ? { minWidth: imageMinWidth, flexBasis: imageFlex, maxWidth: imageMaxWidth, flexShrink: 0 } : {}) } },
        React.createElement(ImageDisplay, { images: images, variant: imageVariant, alt: String(title), className: "seekora-item-card-image" }),
        actionButtons && actionButtons.length > 0 && actionButtonsPosition?.startsWith('overlay') && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" })))) : (React.createElement("div", { className: "seekora-item-card-placeholder", style: { ...imgStyle, ...(isHorizontal ? { minWidth: imageMinWidth, flexBasis: imageFlex, maxWidth: imageMaxWidth, height: imageHeight, flexShrink: 0 } : {}) }, "aria-hidden": true }));
    const textBlock = (React.createElement("div", { style: isHorizontal ? { display: 'flex', flexDirection: 'column', gap: textGap, flex: 1, minWidth: 0 } : undefined },
        React.createElement("span", { className: "seekora-item-card-title", style: { fontSize: titleFontSize, fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: isHorizontal ? 2 : 3, WebkitBoxOrient: 'vertical' } }, String(title)),
        description ? (React.createElement("span", { className: "seekora-item-card-description", style: { fontSize: descriptionFontSize, color: 'inherit', opacity: 0.6, lineHeight: 1.3, display: '-webkit-box', WebkitLineClamp: lineClamp, WebkitBoxOrient: 'vertical', overflow: 'hidden' } }, String(description))) : null,
        actionButtons && actionButtons.length > 0 && actionButtonsPosition === 'inline' && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" }))));
    const content = isHorizontal ? (React.createElement("div", { style: { display: 'flex', gap: horizontalGap, alignItems: 'flex-start' } },
        imageBlock,
        textBlock)) : (React.createElement(React.Fragment, null,
        imageBlock,
        textBlock));
    const commonProps = {
        className: clsx('seekora-item-card', isHorizontal && 'seekora-item-card--horizontal', isHovered && 'seekora-item-card--hover', className),
        style: {
            ...cardStyle,
            ...(isHorizontal ? { flexDirection: 'row' } : {}),
            ...cardHoverStyle,
            ...style,
        },
        'data-position': position,
        onClick: onSelect,
        onMouseEnter: () => setIsHovered(true),
        onMouseLeave: () => setIsHovered(false),
        onMouseDown: onSelect ? (e) => { e.preventDefault(); onSelect(); } : undefined,
    };
    if (asLink && href) {
        return (React.createElement("a", { href: href, ...commonProps, "data-item-id": item.id }, content));
    }
    return (React.createElement("button", { type: "button", ...commonProps, "data-item-id": item.id }, content));
}
