@props([
    'transaction',
])

@php
    $isIncome = $transaction->type === 'income';
@endphp

<div {{ $attributes->merge(['class' => 'flex items-center py-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 rounded-lg px-2 -mx-2 transition']) }}>
    <!-- Category Icon -->
    <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
         style="background-color: {{ $transaction->category?->color ?? '#6366f1' }}20; color: {{ $transaction->category?->color ?? '#6366f1' }};">
        <i class="fas fa-{{ $transaction->category?->icon ?? ($isIncome ? 'arrow-down' : 'arrow-up') }}"></i>
    </div>

    <!-- Details -->
    <div class="ml-3 flex-1 min-w-0">
        <div class="flex items-center justify-between">
            <p class="font-medium text-gray-900 dark:text-white truncate">
                {{ $transaction->payee ?? $transaction->category?->name ?? ($isIncome ? 'Income' : 'Expense') }}
            </p>
            <p class="font-semibold {{ $isIncome ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }} ml-2">
                {{ $isIncome ? '+' : '-' }}{{ $transaction->currency?->symbol ?? 'Rp' }} {{ number_format($transaction->amount, 2, ',', '.') }}
            </p>
        </div>
        <div class="flex items-center justify-between mt-0.5">
            <p class="text-sm text-gray-500 dark:text-gray-400 truncate">
                {{ $transaction->description ?? $transaction->category?->name ?? '' }}
            </p>
            <p class="text-xs text-gray-400 dark:text-gray-500 ml-2 flex-shrink-0">
                {{ $transaction->date->format('d M') }}
            </p>
        </div>
    </div>
</div>