@props([
    'title',
    'subtitle' => null,
    'href'     => null,      // renders a "View all" link when given
    'padded'   => true,
])

{{-- Card shell: header row + body. Every dashboard widget uses this so the
     header spacing, type scale and "View all" affordance stay identical. --}}

<section {{ $attributes->merge(['class' => 'surface flex flex-col']) }}>
    <header class="flex items-start justify-between gap-4 border-b border-slate-200/70 px-5 py-4 dark:border-slate-700/60">
        <div class="min-w-0">
            <h2 class="truncate text-sm font-semibold text-slate-900 dark:text-white">{{ $title }}</h2>
            @if ($subtitle)
                <p class="mt-0.5 truncate text-xs text-slate-500 dark:text-slate-400">{{ $subtitle }}</p>
            @endif
        </div>

        <div class="flex shrink-0 items-center gap-2">
            {{ $actions ?? '' }}

            @if ($href)
                <a href="{{ $href }}"
                   class="inline-flex items-center gap-1 rounded-lg px-2.5 py-1.5 text-xs font-semibold
                          text-brand-600 transition hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10">
                    View all
                    <x-icon name="arrow-right" class="size-3.5" />
                </a>
            @endif
        </div>
    </header>

    <div class="{{ $padded ? 'p-5' : '' }} flex-1">
        {{ $slot }}
    </div>
</section>