@props([
    't' => [],
    'tone' => 'default',
])

@php
    $cat = \App\Support\CategoryCatalog::get($t['categoryId'] ?? 'other');
    $type = (string) ($t['type'] ?? '');
    $amount = (float) ($t['amount'] ?? 0);
    $isIncome = $type !== '' ? $type === 'income' : $amount > 0;
@endphp
<div
    wire:key="tx-row-{{ $tone }}-{{ $t['id'] }}"
    wire:click="openDetail('{{ $t['id'] }}')"
    class="flex items-center justify-between p-3.5 ios-list-row cursor-pointer hover:bg-surface-hover"
>
    <div class="flex items-center gap-3 min-w-0">
        <div
            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl"
            style="background-color: color-mix(in srgb, {{ $cat['color'] }} 15%, transparent); color: {{ $cat['color'] }}"
        >
            <x-brand-avatar
                :label="$t['name']"
                class="h-9 w-9 rounded-xl"
                icon-class="h-4 w-4"
                :fallback-lucide="$cat['icon']"
            />
        </div>
        <div class="min-w-0">
            <div class="flex items-center gap-1.5">
                <p class="text-sm font-medium truncate">{{ $t['name'] }}</p>
                @if (! empty($t['isRecurring']))
                    <i data-lucide="repeat" class="w-3 h-3 shrink-0 text-muted-foreground"></i>
                @endif
            </div>
            <p class="text-[10px] text-muted-foreground truncate">{{ $cat['name'] }}</p>
        </div>
    </div>
    <div class="flex items-center gap-3 shrink-0">
        <p class="text-sm font-semibold tabular-nums {{ $isIncome ? 'text-income' : 'text-expense' }}">
            {{ $isIncome ? '+' : '-' }}{{ \App\Support\Money::formatEur(abs($amount)) }}
        </p>
        <i data-lucide="chevron-right" class="w-4 h-4 text-muted-foreground/40"></i>
    </div>
</div>