@props([
    'account',
    'showBalance' => true,
])

@php
    $typeColors = [
        'cash' => 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400',
        'bank' => 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400',
        'credit_card' => 'bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400',
        'savings' => 'bg-indigo-100 text-indigo-600 dark:bg-indigo-900/30 dark:text-indigo-400',
        'investment' => 'bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400',
        'e_wallet' => 'bg-yellow-100 text-yellow-600 dark:bg-yellow-900/30 dark:text-yellow-400',
        'loan' => 'bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400',
        'other' => 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400',
    ];

    $typeIcons = [
        'cash' => 'money-bill-wave',
        'bank' => 'university',
        'credit_card' => 'credit-card',
        'savings' => 'piggy-bank',
        'investment' => 'chart-line',
        'e_wallet' => 'wallet',
        'loan' => 'hand-holding-usd',
        'other' => 'ellipsis-h',
    ];
@endphp

<div {{ $attributes->merge(['class' => 'bg-white dark:bg-gray-800 rounded-xl shadow-sm p-4 hover:shadow-md transition']) }}>
    <div class="flex items-center">
        <div class="w-12 h-12 rounded-lg flex items-center justify-center {{ $typeColors[$account->type] ?? $typeColors['other'] }}"
             @if($account->color) style="background-color: {{ $account->color }}20; color: {{ $account->color }};" @endif>
            <i class="fas fa-{{ $account->icon ?? $typeIcons[$account->type] ?? 'wallet' }} text-lg"></i>
        </div>

        <div class="ml-4 flex-1">
            <h3 class="font-medium text-gray-900 dark:text-white">{{ $account->name }}</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $account->type_label }}</p>
        </div>

        @if($showBalance)
            <div class="text-right">
                <p class="font-bold {{ $account->current_balance >= 0 ? 'text-gray-900 dark:text-white' : 'text-red-600 dark:text-red-400' }}">
                    {{ $account->currency?->symbol ?? 'Rp' }} {{ number_format(abs($account->current_balance), 2, ',', '.') }}
                </p>
                @if($account->type === 'credit_card' && $account->credit_limit)
                    <p class="text-xs text-gray-500 dark:text-gray-400">
                        Limit: {{ $account->currency?->symbol ?? 'Rp' }} {{ number_format($account->credit_limit, 0, ',', '.') }}
                    </p>
                @endif
            </div>
        @endif
    </div>
</div>