App.ComboCard = function ComboCard({ combo, selectable, selected, onToggle, onDelete, showDelete }) {
    const MAX_THUMBS = 5;

    const handleClick = () => {
        if (selectable && onToggle) onToggle(combo.id);
    };

    const handleDelete = (e) => {
        e.stopPropagation();
        onDelete(combo.id, combo.name);
    };

    const show = combo.cars ? combo.cars.slice(0, MAX_THUMBS) : [];
    const overflow = (combo.cars ? combo.cars.length : 0) - MAX_THUMBS;

    // Category badges
    const catBadges = [];
    if (combo.categories && combo.categories.length > 0) {
        combo.categories.forEach(cat => {
            catBadges.push(
                <span key={'cat-' + cat.category_id} className="combo-cat-badge">All {cat.category_name}</span>
            );
        });
    }

    // Creator display
    const creatorName = combo.creator_nickname
        ? combo.creator_nickname
        : combo.creator_id
            ? 'User #' + combo.creator_id
            : null;

    // Free/Paid border logic
    const carsAllFree = !combo.cars || combo.cars.length === 0 || combo.cars.every(c => c.is_free == 1);
    const catsAllFree = !combo.categories || combo.categories.length === 0 || combo.categories.every(c => c.all_free == 1);
    const trackFree = combo.track_config_is_free == 1;
    const allFree = carsAllFree && catsAllFree && trackFree;

    let borderClass = '';
    if (allFree) borderClass = ' combo-all-free';
    else borderClass = ' combo-has-paid';

    return (
        <div
            className={'card combo-card' + (selected ? ' selected' : '') + (selectable ? ' selectable' : '') + borderClass}
            onClick={handleClick}
        >
            <div className="card-header">
                <h3 className="card-title">{combo.name}</h3>
                {creatorName && (
                    <div className="combo-creator">
                        creator[ {creatorName} ]
                    </div>
                )}
            </div>
            <img
                src={'images/tracks/' + combo.track_image}
                alt={combo.track_name}
                className="card-img"
                loading="lazy"
            />
            <div className="combo-track-strip">
                <strong>Track:</strong> {combo.track_name}
            </div>
            <div className="card-body">
                <div className="combo-details">
                    <div className="combo-car-list">
                        {show.map(car => (
                            <div key={'car-' + car.id} className="combo-car-item">
                                <img
                                    src={'images/cars/' + car.image_filename}
                                    alt={car.name}
                                    className="combo-car-thumb"
                                    title={car.name}
                                    loading="lazy"
                                />
                                <span className="combo-car-name">{car.name}</span>
                            </div>
                        ))}
                        {catBadges}
                        {overflow > 0 && <span className="combo-thumb-overflow">+{overflow} more</span>}
                        {show.length === 0 && catBadges.length === 0 && (
                            <span className="combo-no-cars">None</span>
                        )}
                    </div>
                </div>
                {showDelete && (
                    <button className="btn btn-danger btn-sm" onClick={handleDelete}>
                        Delete
                    </button>
                )}
            </div>
            {selected && <div className="selected-check">&#10003;</div>}
        </div>
    );
};