@props(['product' => null])
<div class="md:my-3 col relative uppercase font-light">
    {{-- route to single product page --}}
    <a href="{{ route('products.show', $product?->id) }}">
        <img src="/images/collections-photos/collection{{ rand(1, 3) }}.jpg" alt="" class="w-full ">
    </a>
    <div class="collection-title relative hover:scale-y-110 transition">
        <a href="#" uname="add-to-cart-btn" id="{{ $product->id }}" onclick="alert(this.id)"
            class="py-2 px-5 md:text-xl leading-10 absolute bottom-8 right-5 uppercase text-black bg-white w-fit font-light ">
             <i class="lni lni-plus"></i>
        </a>
    </div>
    <div class="product-info text-center my-5">
        <div class="product-brand-container">
            {{-- route to brand collection  --}}
            create2fit
        </div>
        <div class="product-name-container">
            {{-- route to single product page --}}
            {{ $product?->name  }}
            {{-- {{ dd($product) }} --}}
        </div>
        <div class="product-price flex justify-center gap-4">
            <div class="fake-price  line-through">₦ <span
                    class="product-price">{{ number_format($product?->price * 2, 2) }}</span> NGN</div>
            <div class="current-price text-green-600">₦ <span
                    class="product-price">{{ number_format($product?->price, 2) }}</span> NGN</div>
        </div>
    </div>
</div>