App.TrackCard = function TrackCard({ track, selectable, selected, onSelect, onClick }) {
    const handleClick = () => {
        if (selectable && onSelect) onSelect(track.id);
        else if (onClick) onClick(track);
    };

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