@props([
'titulo' => 'Resultados del filtrado',
'descripcion' => 'Aquí aparecerán los resultados que coinciden con los filtros aplicados.',
])

<div class="grid grid-cols-1 lg:grid-cols-4 gap-6 max-w-7xl mx-auto mb-10 ">
    <!-- Filtros -->
    <div class="bg-white rounded-2xl shadow p-4 space-y-4 dark:bg-gray-800">
        <select class="w-full border border-gray-300 rounded p-2 bg-white text-gray-300 dark:bg-gray-600 dark:border-0">
            <option class="dark:text-gray-400 text-gray-500">Opción 1</option>
            <option class="dark:text-gray-400 text-gray-500">Opción 2</option>
        </select>

        <select multiple
            class="w-full border border-gray-300 rounded p-2 bg-white text-gray-600 dark:bg-gray-600 h-28 dark:border-0">
            <option class="dark:text-gray-400 text-gray-500">Opción A</option>
            <option class="dark:text-gray-400 text-gray-500">Opción B</option>
            <option class="dark:text-gray-400 text-gray-500">Opción C</option>
            <option class="dark:text-gray-400 text-gray-500">Opción D</option>
        </select>

        <input type="text" placeholder="Escribí algo..."
            class="w-full border border-gray-300 rounded p-2 text-gray-600 dark:bg-gray-00 dark:text-gray-300" />

        <button
            class="w-full bg-sky-600 text-white px-4 py-2 rounded hover:bg-sky-700 dark:bg-cyan-800 cursor-pointer dark:border-0">Aplicar
            Filtros</button>
    </div>

    <!-- Resultados -->
    <div class="lg:col-span-3 bg-white rounded-2xl shadow p-6 dark:bg-gray-800">
        <h2 class="text-2xl font-semibold mb-4 dark:text-gray-200">{{ $titulo }}</h2>
        <p class="text-gray-600 dark:text-gray-400">{{ $descripcion }}</p>
    </div>
</div>