@props(['product', 'imageHeight' => 'h-56'])

<article
    {{ $attributes->merge(['class' => 'product-card overflow-hidden rounded-xl border border-gray-100 bg-white shadow-sm']) }}>
    <a href="{{ route('products.show', $product) }}"
        class="{{ $imageHeight }} relative block overflow-hidden bg-green-50">
        <img src="{{ $product->primaryImageUrl() }}" alt="{{ $product->displayName() }}"
            class="h-full w-full object-cover"
            onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'" />
        <div class="hidden h-full w-full items-center justify-center bg-green-50 text-6xl" style="display:none;">🥭</div>
        <span class="absolute left-3 top-3 rounded-full bg-green-700 px-3 py-1 text-xs font-semibold text-white">
            {{ $product->badgeLabel() }}
        </span>
    </a>

    <div class="p-5">
        <p class="mb-1 text-xs font-medium uppercase tracking-widest text-gray-400">আম</p>
        <h3 class="mb-3 text-base font-bold text-gray-900">
            <a href="{{ route('products.show', $product) }}" class="transition hover:text-green-700">
                {{ $product->displayName() }}
            </a>
        </h3>

        @if ($product->short_description)
            <p class="mb-4 line-clamp-2 text-sm leading-6 text-gray-500">
                {{ str(strip_tags($product->short_description))->limit(95) }}
            </p>
        @endif

        <div class="mb-4 flex items-end justify-between gap-4">
            <div class="text-lg font-bold text-orange-500">
                {{ $product->formattedPrice() }}
                <span class="text-sm font-normal text-gray-400">{{ $product->unitLabel() }}</span>
            </div>
            <div class="flex gap-0.5" aria-label="৫ তারকা রেটিং">
                <span class="star text-sm">★</span>
                <span class="star text-sm">★</span>
                <span class="star text-sm">★</span>
                <span class="star text-sm">★</span>
                <span class="star text-sm">★</span>
            </div>
        </div>

        <a href="{{ route('products.show', $product->slug) }}" class="btn-cart">
            এখনই অর্ডার করুন
        </a>
    </div>
</article>