@php
    $posts = $posts ?? [];
@endphp

<div>
    @foreach ($posts as $post)
        <div class="border-b border-black/10 py-3 last:border-b-0">
            <a
                href="{{ route('pages.spa.news.show', ['slug' => $post->slug]) }}"
                class="group flex min-w-0 items-center gap-1 lg:gap-4 px-0 md:px-6 py-3 text-neutral-800 hover:bg-amber-200 rounded-3xl transition-colors"
            >
                <div class="shrink-0">
                    <span class="inline-flex items-center rounded-full bg-neutral-800/10 px-3 lg:px-6 py-2 text-xs lg:text-sm font-semibold tracking-wide text-neutral-800/90">
                        怡SPA
                    </span>
                </div>

                <div class="w-24 shrink-0 whitespace-nowrap text-sm lg:text-base text-center text-neutral-700/70">
                    {{ optional($post->published_at)->format('Y/m/d') ?? '' }}
                </div>

                <div class="flex-1 min-w-0">
                    <div class="truncate text-base lg:font-semibold tracking-wide">
                        {{ $post->title ?? '' }}
                    </div>
                </div>

                <div class="shrink-0">
                    <svg viewBox="0 0 24 24" fill="none" class="h-6 w-6 lg:h-10 lg:w-10 transition-all group-hover:text-[#a5b700] group-hover:translate-x-2" aria-hidden="true">
                        <path d="M7 12h10" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                        <path d="M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </div>
            </a>
        </div>
    @endforeach
</div>
