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

<div class="group p-4 border border-neutral-800 rounded-xl hover:border-neon-lime hover:-translate-y-1 transition-all duration-300">
    {{-- Imagen si existe --}}
    @if ($image)
        <img src="{{ asset('storage/' . $image) }}" alt="{{ $title }}"
            class="w-full h-40 object-cover rounded mb-4">
    @else
        <div class="w-full h-40 bg-lime-500 flex items-center justify-center rounded mb-4">
            <span class="text-neutral-900 text-md uppercase font-bold">Sin imagen</span>
        </div>
    @endif

    {{-- Nombre --}}
    <h2 class="text-lg font-semibold text-white">{{ $title }}</h2>

    {{-- Descripción corta --}}
    <div class="h-10 overflow-y-auto [scrollbar-width:none]">
        @if (!empty($description))
            <p class="text-sm text-gray-400 mt-2">{{ $description }}</p>
        @endif
    </div>

    {{-- Precio --}}
    <p class="text-white group-hover:text-neon-lime font-bold mt-3 transition-colors">${{ number_format($price, 2, ',', '.') }}</p>

    {{-- Botón --}}
    <a href="{{ $href }}" class="mt-4 block w-full bg-blue-500 text-white py-2 rounded-lg text-center hover:bg-blue-600">
        Ver producto
    </a>
</div>