@props([
    'title',
    'emoji',
    'status' => 'Verfügbar',
    'price' => 0,
    'available' => true,
])

<div class="group grid grid-cols-[44px_1fr_auto] gap-3 items-center py-3 border-t border-line first:border-t-0 transition-colors hover:bg-bg-tint -mx-2 px-2 rounded-lg">
    <div class="w-10 h-10 rounded-lg bg-bg-base grid place-items-center text-lg transition-transform group-hover:scale-105">
        {{ $emoji }}
    </div>
    <div class="min-w-0">
        <div class="font-semibold text-sm text-ink-1 truncate">{{ $title }}</div>
        <div class="text-xs text-ink-3 mt-0.5 truncate">{{ $status }}</div>
    </div>
    <div class="font-mono tabular-nums text-xs font-bold {{ $available ? 'text-green-ink' : 'text-ink-3' }}">
        {{ number_format((int) $price, 0, ',', '.') }} Pkt.
    </div>
</div>