@props([
    'name'  => '',
    'price' => null,
    'image' => null,
    'href'  => '#',
])

<div class="group">
    <div class="relative flex items-center justify-center mb-4">
        <a href="{{ $href }}" class="block w-full border border-black overflow-hidden bg-white aspect-[251/335] flex items-center justify-center">
            @if($image)
                <img
                    src="{{ $image }}"
                    alt="{{ $name }}"
                    loading="lazy"
                    class="w-full h-auto block"
                >
            @else
                <div class="w-full aspect-square bg-neutral-300 flex items-center justify-center text-neutral-500 text-sm">
                    {{ __('storefront.product.no_image') }}
                </div>
            @endif
        </a>

        <x-ui.button size="md" position="absolute" class="opacity-0 group-hover:opacity-100 transition-opacity duration-100">
            {{ __('storefront.product.add_to_cart') }}
        </x-ui.button>
    </div>

    <div class="flex items-baseline justify-between gap-4">
        <a href="{{ $href }}" class="font-bold text-xl leading-snug hover:text-brand">{{ $name }}</a>
        @if($price !== null)
            <span class="font-bold text-xl shrink-0"><x-ui.price :amount="$price" /></span>
        @endif
    </div>
</div>