@props([
    'title',
    'courses',
    'blurb' => null,
    'href'  => null,
])

@if ($courses->isNotEmpty())
<section {{ $attributes }}>
    <div class="flex flex-wrap items-end justify-between gap-3">
        <div>
            <h2 class="text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-50">{{ $title }}</h2>
            @if ($blurb)
                <p class="mt-1 text-[14px] text-slate-600 dark:text-slate-300">{{ $blurb }}</p>
            @endif
        </div>

        @if ($href)
            <a href="{{ $href }}" class="text-[14px] font-semibold text-teal-800 hover:underline dark:text-teal-400">
                See all &rarr;
            </a>
        @endif
    </div>

    <div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        @foreach ($courses as $course)
            <x-course-card :course="$course" />
        @endforeach
    </div>
</section>
@endif