@php
    use App\Services\Translator;

    $fx = $fixture['fixture'] ?? [];
    $teams = $fixture['teams'] ?? [];
    $goals = $fixture['goals'] ?? [];
    $leagueInfo = $fixture['league'] ?? [];

    $status = $fx['status']['short'] ?? '';
    $isLive = in_array($status, ['1H','2H','HT','LIVE','ET','P','BT']);
    $isFinished = in_array($status, ['FT','AET','PEN']);

    $home = $teams['home'] ?? [];
    $away = $teams['away'] ?? [];
    $homeName = Translator::team($home['name'] ?? '');
    $awayName = Translator::team($away['name'] ?? '');

    $date = !empty($fx['date']) ? \Carbon\Carbon::parse($fx['date'])->setTimezone('Africa/Tunis') : null;
    $timeStr = $date ? $date->format('H:i') : '--:--';
    $dateStr = $date ? $date->translatedFormat('d M') : '';
@endphp

<a href="#" class="flex items-center mx-2.5 my-[3px] px-2.5 py-2 bg-white rounded-[10px] border {{ $isLive ? 'border-[#E53E3E]' : 'border-black/10' }}" style="border-width: {{ $isLive ? '1.5px' : '0.5px' }};">
    {{-- Home --}}
    <div class="flex-[3] flex items-center gap-1.5 min-w-0">
        <div class="w-[22px] h-[22px] rounded-full bg-gray-200 flex items-center justify-center overflow-hidden flex-shrink-0">
            @if(!empty($home['logo']))
                <img src="{{ $home['logo'] }}" alt="" class="w-full h-full object-contain" loading="lazy">
            @endif
        </div>
        <span class="font-semibold text-black/70 line-clamp-1" style="font-size: 10px;">{{ $homeName }}</span>
    </div>

    {{-- Center --}}
    <div class="flex flex-col items-center justify-center text-center flex-shrink-0 px-2" style="width: {{ $isLive ? '90px' : '70px' }};">
        @if($isLive)
            <div class="bg-[#E53935] text-white font-bold rounded" style="padding: 1px 5px; font-size: 8px;">{{ ($fx['status']['elapsed'] ?? 0) }}'</div>
            <div class="font-bold text-[#E53935] mt-0.5" style="font-size: 14px;">{{ $goals['home'] ?? 0 }} - {{ $goals['away'] ?? 0 }}</div>
        @elseif($isFinished)
            <div class="bg-[#38A169] text-white font-bold rounded" style="padding: 1px 5px; font-size: 8px;">{{ __('messages.finished') }}</div>
            <div class="font-bold text-[#2e8b6b] mt-0.5" style="font-size: 13px;">{{ $goals['home'] ?? 0 }} - {{ $goals['away'] ?? 0 }}</div>
        @else
            @if(!empty($dateStr))
                <div class="text-[#2e8b6b] font-semibold" style="font-size: 9px;">{{ $dateStr }}</div>
            @endif
            <div class="text-[#1A1A2E] font-semibold" style="font-size: 12px;">{{ $timeStr }}</div>
        @endif
    </div>

    {{-- Away --}}
    <div class="flex-[3] flex items-center gap-1.5 justify-end min-w-0">
        <span class="font-semibold text-black/70 line-clamp-1 text-end" style="font-size: 10px;">{{ $awayName }}</span>
        <div class="w-[22px] h-[22px] rounded-full bg-gray-200 flex items-center justify-center overflow-hidden flex-shrink-0">
            @if(!empty($away['logo']))
                <img src="{{ $away['logo'] }}" alt="" class="w-full h-full object-contain" loading="lazy">
            @endif
        </div>
    </div>
</a>