@props([
    'posts' => collect(),
    'variant' => 'list',
])

@php
    $posts = collect($posts);
@endphp

@if ($posts->isNotEmpty())
    <section class="space-y-4">
        @if ($variant === 'compact')
            <div class="overflow-hidden rounded-[1.5rem] border border-muted bg-card shadow-sm">
                <div class="divide-y divide-muted">
                    @foreach ($posts as $post)
                        @php
                            $tenantName = $post->tenant?->name ?: $post->tenant_key;
                            $publishedDate = optional($post->published_at)->format('Y.m.d') ?? '-';
                        @endphp

                        <a
                            href="{{ method_exists($post, 'resolvePostUrl') ? $post->resolvePostUrl() : '' }}"
                            target="_blank"
                            rel="noopener"
                            class="group flex items-center gap-3 px-4 py-3 transition-colors hover:bg-surface1 sm:px-5"
                        >
                            <div class="min-w-0 flex-1 space-y-1">
                                <div class="flex flex-wrap items-center gap-2">
                                    <span class="text-xs font-bold uppercase tracking-[0.16em] c-subtle">{{ $post->source_board_title }}</span>
                                    <span class="text-xs font-medium c-subtle">{{ $tenantName }}</span>
                                </div>

                                <div class="truncate text-sm font-semibold tracking-[-0.02em] c-main transition-colors group-hover:c-primary sm:text-base">
                                    {{ $post->title }}
                                </div>
                            </div>

                            <div class="shrink-0 text-xs font-medium c-muted sm:text-sm">
                                {{ $publishedDate }}
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        @else
            <div class="-mx-4 overflow-x-auto px-4 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden md:-mx-6 md:px-6 lg:-mx-8 lg:px-8">
                <div class="flex min-w-max gap-4">
                    @foreach ($posts as $post)
                        @php
                            $tenantName = $post->tenant?->name ?: $post->tenant_key;
                        @endphp

                        <a
                            href="{{ method_exists($post, 'resolvePostUrl') ? $post->resolvePostUrl() : '' }}"
                            target="_blank"
                            rel="noopener"
                            class="group flex w-[min(60vw,24rem)] shrink-0 flex-col overflow-hidden rounded-[1.5rem] border border-muted bg-card shadow-sm transition-colors hover:bg-surface1 sm:w-[22rem] lg:w-[24rem]"
                        >
                            <div class="relative aspect-[16/9] overflow-hidden bg-surface">
                                @if ($post->thumbnail_url)
                                    <img
                                        src="{{ $post->thumbnail_url }}"
                                        alt=""
                                        class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.035]"
                                    >
                                @else
                                    <div class="absolute inset-0 flex items-center justify-center bg-brand-gradient px-6 text-center text-white">
                                        <div class="space-y-3">
                                            <div class="line-clamp-2 text-lg font-semibold leading-tight tracking-[-0.03em]">
                                                {{ $post->title }}
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/15 to-transparent"></div>
                            </div>

                            <div class="flex flex-1 min-w-0 flex-col gap-3 p-4 sm:p-5">
                                <div class="flex flex-wrap items-center gap-2">
                                    <x-ui.badge variant="secondary" size="sm">{{ $tenantName }}</x-ui.badge>
                                </div>

                                <div class="min-w-0 space-y-2">
                                    <div class="line-clamp-2 text-base font-bold leading-tight tracking-[-0.03em] c-main transition-colors group-hover:c-primary">
                                        {{ $post->title }}
                                    </div>

                                    @if ($post->meta_description)
                                        <p class="line-clamp-2 text-sm c-muted">
                                            {{ $post->meta_description }}
                                        </p>
                                    @endif
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        @endif
    </section>
@endif