@props([
    'product' => null,
    'name' => null,
    'price' => null,
    'image' => null,
    'url' => null,
])

@php
    $name = $name ?? ($product->name ?? '');
    $price = $price ?? ($product->price ?? null);
    $image = $image ?? ($product->image_url ?? ($product->image ?? null));

    if (! $url && $product) {
        try {
            $url = route('products.show', $product);
        } catch (\Throwable $e) {
            $url = $product->url ?? '#';
        }
    }

    $url = $url ?: '#';
@endphp

<a
    href="{{ $url }}"
    {{ $attributes->merge([
        'class' => 'group block overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-card)] shadow-[var(--shadow-sm)] transition duration-300 hover:-translate-y-1 hover:border-[color-mix(in_srgb,var(--color-accent)_45%,var(--color-border))] hover:shadow-[var(--shadow-md)]',
    ]) }}
>
    <div class="aspect-square overflow-hidden bg-[color-mix(in_srgb,var(--color-primary)_4%,var(--color-bg))]">
        @if ($image)
            <img
                src="{{ $image }}"
                alt="{{ $name }}"
                class="h-full w-full object-cover transition duration-500 group-hover:scale-110"
                loading="lazy"
            >
        @else
            <div class="flex h-full w-full items-center justify-center text-[var(--color-text-muted)]">
                <x-ui.icon name="cart" class="h-8 w-8 opacity-40" />
            </div>
        @endif
    </div>

    <div class="p-3.5">
        <h3 class="line-clamp-2 text-sm font-semibold tracking-tight text-[var(--color-text)]">{{ $name }}</h3>
        @if (! is_null($price))
            <div class="mt-2 text-[var(--color-primary)]">
                <x-store.price :amount="$price" />
            </div>
        @endif
    </div>
</a>