@props([
    'product',
])

@php
$badgeVariant = match ($product->badge ?? null) {
    'new' => 'success',
    'hot' => 'danger',
    default => null,
};
$badgeLabel = match ($product->badge ?? null) {
    'new' => __('pages/admin/prebuilt-pages.products.badges.new'),
    'hot' => __('pages/admin/prebuilt-pages.products.badges.hot'),
    default => null,
};
@endphp

<article
    class="group overflow-hidden rounded-xl border border-border bg-card shadow-sm transition-shadow duration-200 hover:shadow-md"
    data-product-card
    data-product-id="{{ $product->id }}"
    data-product-status="{{ $product->status }}"
>
    <div class="relative aspect-square overflow-hidden bg-muted/40">
        @if($badgeLabel)
            <div class="absolute start-3 top-3 z-10">
                <x-utility.badge :variant="$badgeVariant" size="sm">{{ $badgeLabel }}</x-utility.badge>
            </div>
        @endif

        <img
            src="{{ $product->image }}"
            alt="{{ $product->title }}"
            class="h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
            loading="lazy"
        />
    </div>

    <div class="space-y-1.5 p-4 text-center">
        <p class="text-xs font-medium uppercase tracking-wide text-muted-foreground">
            {{ $product->category }}
        </p>
        <h3 class="text-sm font-semibold text-foreground line-clamp-2">
            {{ $product->title }}
        </h3>
        <div class="flex items-center justify-center gap-2 pt-0.5">
            <span class="text-xs text-muted-foreground line-through">
                ${{ number_format($product->original_price) }}
            </span>
            <span class="text-base font-bold text-brand">
                ${{ number_format($product->price) }}
            </span>
        </div>
    </div>
</article>