App.CarCard = function CarCard({ car, selectable, selected, onToggle }) {
    const handleClick = () => {
        if (selectable && onToggle) onToggle(car.id);
    };

    return (
        <div
            className={'card car-card' + (selected ? ' selected' : '') + (selectable ? ' selectable' : '')}
            onClick={handleClick}
        >
            <img
                src={'images/cars/' + car.image_filename}
                alt={car.name}
                className="card-img"
                loading="lazy"
            />
            <div className="card-body">
                <h3 className="card-title">{car.name}</h3>
                <span className="card-badge">{car.category_name}</span>
            </div>
            {selected && <div className="selected-check">&#10003;</div>}
        </div>
    );
};