@props([
    'title',
    'description' => null,
])

<x-filament::section>
    <div class="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
        <div class="space-y-1">
            <div class="flex items-center gap-2">
                <h3 class="text-base font-semibold text-gray-950 dark:text-white">
                    {{ $title }}
                </h3>
            </div>

            @if (filled($description))
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    {{ $description }}
                </p>
            @endif
        </div>
    </div>

    @if ($slot->isNotEmpty())
        <div class="mt-4">
            {{ $slot }}
        </div>
    @endif
</x-filament::section>