@props([
    'result'          => [],
    'index'           => 0,
    'href'            => null,
    'wireClick'       => null,
    'showScore'       => false,
    'showCallable'    => true,
    'showReactions'    => true,
    'photoBlur'        => 0,
    'photoContrast'    => 100,
    'photoSaturate'    => 100,
    'photoBrightness'  => 100,
    'heightClass'      => 'h-[430px] md:h-[550px] lg:h-[430px]',
    'truncateExcerpt' => false,
])

<div class="relative flex flex-col justify-end overflow-hidden rounded-lg bg-theme-background shadow-2xl {{ $heightClass }}">
    @if ($wireClick)
        <a href="#" wire:click.prevent="{{ $wireClick }}"
           class="relative flex h-full cursor-pointer flex-col overflow-hidden rounded-lg">
    @else
        <a href="{{ $href ?? route('call.show', ['id' => $result['id']]) }}"
           class="relative flex h-full cursor-pointer flex-col overflow-hidden rounded-lg">
    @endif

        <!-- Tag category color background -->
        <div class="absolute inset-0 z-0 bg-{{ $result['tag_color'] ?? 'gray' }}-400"></div>
        <div class="absolute inset-0 z-10 bg-black/50"></div>

        <!-- Card content -->
        <div class="relative z-20 flex h-full flex-col justify-between px-6 pt-10 pb-10 lg:px-14 lg:pt-14 lg:pb-14 text-white">
            <div class="flex-1">
                <div class="flex items-start justify-between gap-4">
                    <div class="flex flex-wrap items-center gap-2">
                        {{-- Deepest tag category badge only --}}
                        @php $deepestCat = !empty($result['tag_categories']) ? last($result['tag_categories']) : null; @endphp
                        @if ($deepestCat)
                            <span class="bg-{{ $deepestCat['color'] ?? 'gray' }}-400 inline-flex items-center rounded-md px-2 py-1 text-sm font-normal text-black">
                                {{ $deepestCat['name'] }}
                            </span>
                        @endif
                    </div>
                    {{-- Reaction button --}}
                    @if ($showReactions)
                    <div class="flex items-start -m-2 flex-shrink-0">
                        <div class="-my-3">
                            @livewire('reaction-button', [
                                'typeName' => 'like',
                                'showCounter' => true,
                                'reactionCounter' => $result['like_count'],
                                'modelClass' => $result['model'],
                                'modelId' => $result['id'],
                                'size' => 'w-6 h-6',
                                'inverseColors' => true,
                            ], key('like-' . $result['model'] . '-' . $result['id'] . '-' . $index))
                        </div>
                    </div>
                    @endif
                </div>
                <div>
                    <h2 class="my-3 text-4xl font-semibold leading-tight line-clamp-2">
                        {{ $result['title'] }}
                    </h2>
                    {{-- Location + expiry badges --}}
                    @if (!empty($result['location']) || !empty($result['expiry_badge_text']))
                        <div class="mt-3 flex flex-wrap items-center gap-2">
                            @if (!empty($result['location']))
                                <h4 class="inline-block items-center rounded-sm bg-black px-2 pb-1 pt-0.5 text-sm font-normal uppercase text-white">
                                    {{ $result['location'] }}
                                </h4>
                            @endif
                            @if (!empty($result['expiry_badge_text']))
                                <h4 class="inline-block items-center rounded-sm bg-black px-2 pb-1 pt-0.5 text-sm font-normal uppercase text-white">
                                    {{ $result['expiry_badge_text'] }}
                                </h4>
                            @endif
                        </div>
                    @endif
                    <p class="mt-3 text-base font-semibold {{ $truncateExcerpt ? 'line-clamp-2' : '' }}">
                        {{ $result['excerpt'] }}
                    </p>
                </div>
            </div>

            @if ($showCallable)
            <div class="flex flex-wrap items-end gap-4">
                <div class="flex items-center gap-3">
                    {{-- Callable avatar --}}
                    @if (!empty($result['photo']))
                        <div class="h-16 w-16 flex-shrink-0 rounded-full outline outline-1 outline-offset-1 outline-white/50 overflow-hidden">
                            <img src="{{ $result['photo'] }}"
                                 alt="{{ $result['callable_name'] }}"
                                 class="h-full w-full object-cover" />
                        </div>
                    @endif
                    <div class="flex flex-col gap-1 text-sm">
                        {{-- Callable name --}}
                        @if (!empty($result['callable_name']))
                            <span class="font-medium">{{ $result['callable_name'] }}</span>
                        @endif
                        {{-- Callable location --}}
                        @if (!empty($result['callable_location']))
                            <span class="text-white/80">{{ $result['callable_location'] }}</span>
                        @endif
                    </div>
                </div>
            </div>
            @endif
        </div>

        @if ($showScore)
            <div class="text-2xs absolute bottom-5 right-5 z-20 text-transparent sm:text-white drop-shadow">
                {{ __('search score') . ': ' . round($result['score'] ?? 0, 1) }}
            </div>
        @endif

    </a>
</div>