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

<button type="button" {{ $attributes->merge(['class' => 'flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm text-slate-200 transition-colors hover:bg-slate-800']) }}>
    <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-slate-800/80">
        @if ($icon)
            @include('meet.room.partials.meet-icon', ['icon' => $icon, 'class' => 'h-5 w-5'])
        @else
            {{ $slot }}
        @endif
    </span>
    <span class="min-w-0">
        <span class="block font-medium">{{ $title }}</span>
        @if ($subtitle)
            <span class="block text-xs text-slate-400">{{ $subtitle }}</span>
        @endif
    </span>
</button>