@extends('layouts.app')

@section('title', 'Transaction History')

@section('content')
<h1 class="font-headline-lg text-headline-lg text-on-surface">Transaction History</h1>

<div class="glass-surface rounded-xl divide-y divide-outline-variant/30">
    @forelse($transactions ?? [] as $tx)
    <div class="p-4 flex items-center justify-between hover:bg-surface-variant/20 transition-colors">
        <div>
            <h4 class="font-body-md text-body-md text-on-surface font-medium">{{ Str::headline($tx->type) }}</h4>
            <p class="font-body-sm text-body-sm text-on-surface-variant">{{ $tx->created_at->format('M j, Y g:i A') }}</p>
        </div>
        <span class="font-data-label text-data-label {{ $tx->points_delta >= 0 ? 'text-secondary' : 'text-error' }}">
            {{ $tx->points_delta >= 0 ? '+' : '' }}{{ number_format($tx->points_delta) }} Pts
        </span>
    </div>
    @empty
    <div class="p-6 text-center text-on-surface-variant font-body-sm text-body-sm">No transactions yet.</div>
    @endforelse
</div>

{{ $transactions->links() ?? '' }}
@endsection