@props(['name', 'meta' => null, 'icon' => 'rooms'])

<div {{ $attributes->merge(['class' => 'bg-surface border border-line-soft rounded-card p-4 flex flex-col gap-3 transition-[border-color,transform] duration-200 hover:border-line hover:-translate-y-px']) }}>
    <div class="flex items-center gap-2.5">
        <span class="grid place-items-center w-8 h-8 rounded-lg bg-inset text-ink-2">
            <x-icon :name="$icon" :size="16" />
        </span>
        <div class="min-w-0">
            <div class="text-[13px] font-semibold text-ink truncate">{{ $name }}</div>
            @if ($meta)
                <div class="text-[11px] text-ink-3">{{ $meta }}</div>
            @endif
        </div>
        @isset($action)
            <div class="ml-auto">{{ $action }}</div>
        @endisset
    </div>

    @if (trim($slot) !== '')
        <div class="flex flex-wrap gap-1.5">
            {{ $slot }}
        </div>
    @endif
</div>