<?php
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\SocialPost;
?>

<main class="max-w-7xl mx-auto px-4 md:px-6 py-10">
    <div class="mb-10">
        <h1 class="text-3xl md:text-5xl font-black text-slate-900 tracking-tight uppercase flex items-center gap-4">
            <i class="fa-brands fa-facebook text-blue-600"></i>
            {{ __('social.facebook_title') }} <span class="text-blue-600 ml-2">{{ __('social.facebook_highlight') }}</span>
        </h1>
        <div class="h-1 w-16 bg-blue-600 mt-3 rounded"></div>
        <p class="text-slate-500 mt-4 text-sm font-odia">{{ __('social.facebook_subtitle') }}</p>
    </div>

    @if($posts->count())
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($posts as $post)
        <div class="overflow-hidden rounded-lg border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
            {!! $post->embed_html !!}
            @if($post->title || $post->description)
            <div class="p-4 border-t border-slate-100">
                @if($post->title)
                <h3 class="text-sm font-bold text-slate-800 font-odia leading-snug mb-1">{{ $post->title }}</h3>
                @endif
                @if($post->description)
                <p class="text-xs text-slate-500 font-odia line-clamp-2">{{ $post->description }}</p>
                @endif
            </div>
            @endif
        </div>
        @endforeach
    </div>

    <div class="mt-12">
        {{ $posts->links() }}
    </div>
    @else
    <div class="bg-slate-50 p-12 text-center rounded-lg border border-slate-100">
        <i class="fa-brands fa-facebook text-5xl text-blue-200 mb-4 block"></i>
        <p class="text-slate-400 font-odia">{{ __('social.facebook_empty') }}</p>
    </div>
    @endif
</main>