@props([
    'item',
])

<article {{ $attributes->merge(['class' => 'lift-on-hover flex flex-col overflow-hidden rounded-xl border border-brand-border bg-brand-white']) }}>
    <x-responsive-image
        :src="$item['image'] ?? null"
        :alt="$item['image_alt'] ?? ($item['title'] ?? 'Réalisation NH TRANS')"
        class="aspect-[4/3] w-full"
    />

    <div class="flex flex-1 flex-col gap-2 p-5">
        @if (!empty($item['category']))
            <span class="w-fit rounded-full bg-brand-primary/10 px-2.5 py-1 text-xs font-semibold uppercase tracking-wide text-brand-primary">
                {{ $item['category'] }}
            </span>
        @endif

        <h3 class="text-base font-semibold text-brand-ink">{{ $item['title'] ?? 'Réalisation' }}</h3>

        @if (!empty($item['description']))
            <p class="text-sm leading-relaxed text-brand-muted">{{ $item['description'] }}</p>
        @endif

        @if (!empty($item['location']) || !empty($item['completed_at']))
            <div class="mt-auto flex flex-wrap gap-3 pt-2 text-xs text-brand-muted">
                @if (!empty($item['location']))
                    <span class="inline-flex items-center gap-1">
                        <x-icon name="pin" class="h-3.5 w-3.5" />
                        {{ $item['location'] }}
                    </span>
                @endif

                @if (!empty($item['completed_at']))
                    <span class="inline-flex items-center gap-1">
                        <x-icon name="calendar" class="h-3.5 w-3.5" />
                        {{ $item['completed_at'] }}
                    </span>
                @endif
            </div>
        @endif
    </div>
</article>
