@props([
'titulo' => 'Título por defecto',
'descripcion' => '',
'imagen' => '',
'acciones' => [],
])


<!-- Card vertical con imagen, título, descripción y botones -->
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden mb-10">
    <div class="relative">
        <img src="https://www.lacuevadelnerd.com/wp-content/uploads/2024/12/sonic.jpg" alt="Imagen"
            class="w-full h-48 object-cover">
        <div
            class="absolute top-2 right-2 bg-sky-600 dark:bg-cyan-600 text-white text-xs font-bold px-2 py-1 rounded-full">
            Tag
        </div>
    </div>
    <div class="p-4">
        <h3 class="text-xl font-semibold mb-2 dark:text-gray-200">{{ $titulo }}</h3>
        <p class="text-gray-600 mb-4 dark:text-gray-400">{{ $descripcion }}</p>
        <div class="flex justify-between space-x-2">
            <button
                class="cursor-pointer bg-sky-600 dark:sky-700 text-white text-sm px-4 py-2 rounded hover:bg-sky-700">Acción
                1</button>
            <button
                class="cursor-pointer bg-teal-600 dark:bg-teal-700 text-white text-sm px-4 py-2 rounded hover:bg-teal-700">Acción
                2</button>
            <button
                class="cursor-pointer bg-red-600 dark:bg-red-800 text-white text-sm px-4 py-2 rounded hover:bg-red-700">Acción
                3</button>
        </div>
    </div>
</div>