@props([
    'title',
    'meta',
    'icon',
    'color' => 'primary',
    'points' => 0,
    'startUrl' => null,
])

@php
    $colorMap = [
        'primary' => ['bg' => 'bg-primary-soft', 'ink' => 'text-primary-ink'],
        'rose'    => ['bg' => 'bg-rose-soft',    'ink' => 'text-rose-ink'],
        'violet'  => ['bg' => 'bg-violet-soft',  'ink' => 'text-violet-ink'],
        'green'   => ['bg' => 'bg-green-soft',   'ink' => 'text-green-ink'],
        'amber'   => ['bg' => 'bg-amber-soft',   'ink' => 'text-amber-ink'],
    ];
    $c = $colorMap[$color] ?? $colorMap['primary'];
@endphp

<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 {{ $c['bg'] }} {{ $c['ink'] }} grid place-items-center font-bold transition-transform group-hover:scale-105">
        {{ $icon }}
    </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">{{ $meta }}</div>
    </div>
    <div class="flex items-center gap-3">
        <span class="font-mono tabular-nums text-xs text-amber-ink font-bold">+{{ (int) $points }} Pkt.</span>
        @if($startUrl)
            <x-btn variant="primary" size="sm" as="a" :href="$startUrl">Starten</x-btn>
        @else
            <x-btn variant="primary" size="sm">Starten</x-btn>
        @endif
    </div>
</div>