@props(['title' => null, 'padded' => true, 'flush' => false, 'icon' => null])

<div {{ $attributes->merge(['class' => 'hms-card']) }}>
    @if ($title || isset($header) || isset($actions))
        <div class="hms-card-header">
            <div class="flex min-w-0 items-center gap-2">
                @if ($icon)
                    <span class="shrink-0 text-brand-600"><x-icon :name="$icon" size="sm" /></span>
                @endif

                <div class="min-w-0">
                @if ($title)
                    <h2 class="text-sm font-semibold text-slate-900">{{ $title }}</h2>
                @endif

                @if (isset($header))
                    <div class="text-sm text-slate-500">{{ $header }}</div>
                @endif
                </div>
            </div>

            @isset($actions)
                <div class="flex flex-wrap items-center gap-2">{{ $actions }}</div>
            @endisset
        </div>
    @endif

    <div class="{{ $flush ? '' : ($padded ? 'hms-card-body' : '') }}">
        {{ $slot }}
    </div>

    @isset($footer)
        <div class="border-t border-slate-200 bg-slate-50/70 px-5 py-3">{{ $footer }}</div>
    @endisset
</div>