<div class="card h-100 shadow-sm">
    <div class="image position-relative" style="cursor: pointer;">
        <img src="{{product.pictureUrl}}" alt="{{product.name}}" class="img-fluid bg-light">
        <div class="d-flex align-items-center justify-content-center hover-overlay">
            <button (click)="addItemToBasket()" type="button" class="btn btn-sm btn-primary fa fa-shopping-cart me-2"></button>
            <button routerLink="/shop/{{product.id}}" type="button" class="btn btn-sm btn-primary">View</button>
        </div>
    </div>
    <div class="card-body d-flex flex-column">
        <a routerLink="/shop/{{product.id}}">
            <h6 class="text-uppercase">{{product.name}}</h6>
        </a>
        <span class="mb-2">{{product.price | currency}}</span>
    </div>
</div>
