@props(['product', 'showCategory' => false])

<article
    data-product-card
    data-id="{{ $product['id'] }}"
    data-name="{{ $product['name'] }}"
    data-price="{{ $product['price'] }}"
    data-old-price="{{ $product['old_price'] ?? '' }}"
    data-category="{{ $product['category'] }}"
    data-category-label="{{ \App\Support\StoreCatalog::categoryLabel($product['category']) }}"
    data-tags="{{ implode(',', $product['tags']) }}"
    data-deal="{{ $product['old_price'] ? '1' : '0' }}"
    data-image="{{ $product['image'] }}"
    data-wished="{{ $product['wished'] ? '1' : '0' }}"
    data-in-cart="{{ $product['in_cart'] ? '1' : '0' }}"
    {{ $attributes->merge(['class' => 'flex h-full min-w-0 flex-col rounded-2xl border border-[#EEF1F6] bg-[#F7F8FB] p-2 shadow-[0_1px_2px_rgba(27,37,89,0.04)]']) }}
>
    <div class="relative overflow-hidden rounded-xl" data-card-media>
        @if ($product['discount'])
            <span class="absolute left-1.5 top-1.5 z-10 rounded-full bg-[#D10F2A] px-1.5 py-0.5 text-[10px] font-bold leading-none text-white">-{{ $product['discount'] }}%</span>
        @endif
        <button
            type="button"
            data-wishlist-toggle
            data-id="{{ $product['id'] }}"
            class="absolute right-1.5 top-1.5 z-10 grid h-7 w-7 place-items-center rounded-full bg-white shadow-sm"
            aria-pressed="{{ $product['wished'] ? 'true' : 'false' }}"
            aria-label="{{ $product['wished'] ? 'Remove '.$product['name'].' from wishlist' : 'Add '.$product['name'].' to wishlist' }}"
        >
            <x-store.icon name="heart" width="15" height="15" />
        </button>
        @if (! empty($product['image_path']))
            <x-store.picture :path="$product['image_path']" alt="" sizes="(min-width: 1024px) 180px, 45vw" class="aspect-square w-full rounded-xl bg-[#F4F1FF] object-contain" />
        @else
            <x-store.image-placeholder :label="$product['image']" class="aspect-square w-full rounded-xl" />
        @endif
    </div>
    <h3 class="mt-2 line-clamp-2 min-h-[2.4em] text-[12px] font-semibold leading-tight text-navy lg:text-[13px]">
        @if (! empty($product['url']))
            <a href="{{ $product['url'] }}">{{ $product['name'] }}</a>
        @else
            {{ $product['name'] }}
        @endif
    </h3>
    @if ($showCategory)
        <p class="mt-0.5 truncate text-[11px] text-muted">{{ \App\Support\StoreCatalog::categoryLabel($product['category']) }}</p>
    @endif
    <div class="mt-1 mb-2 flex flex-wrap items-baseline gap-x-1.5">
        <span class="text-[13px] font-bold text-navy">${{ number_format($product['price'], 2) }}</span>
        @if ($product['old_price'])
            <span class="text-[11px] text-[#98A2B3] line-through">${{ number_format($product['old_price'], 2) }}</span>
        @endif
    </div>
    <button type="button" data-add-cart data-id="{{ $product['id'] }}" class="mt-auto flex min-h-9 w-full items-center justify-center gap-1.5 rounded-lg bg-brand px-2 pt-2 pb-2 text-[12px] font-semibold text-white">
        <x-store.icon name="cart" width="14" height="14" />
        {{ __('ui.add_to_cart') }}
    </button>
</article>