@props(['caption' => '', 'media' => null, 'name' => 'User', 'avatar' => '', 'scheduledAt' => 'Now'])

<div class="bg-white rounded-xl border border-gray-200 text-[13px]">
    <div class="p-3">
        <div class="flex items-start gap-2 mb-3">
            <img src="{{ $avatar }}" class="w-12 h-12 rounded-full object-cover" alt="">
            <div>
                <p class="font-semibold text-gray-900">{{ $name }}</p>
                <p class="text-gray-400 text-xs">Social Media Manager</p>
                <p class="text-gray-400 text-xs">{{ $scheduledAt }} · 🌐</p>
            </div>
            <button class="ml-auto text-blue-600 font-semibold border border-blue-600 rounded-full px-3 py-1 text-xs hover:bg-blue-50 transition-colors">+ Follow</button>
        </div>
        <p class="text-gray-800 whitespace-pre-wrap break-words leading-relaxed">{{ Str::limit($caption, 200) }}</p>
    </div>

    @if($media)
        <img src="{{ $media }}" class="w-full object-cover max-h-52" alt="">
    @endif

    <div class="px-3 py-2 border-t border-gray-100">
        <div class="text-gray-400 text-xs mb-2">0 reactions</div>
        <div class="flex justify-around text-gray-500">
            <button class="flex flex-col items-center gap-1 text-xs hover:text-blue-600 transition-colors">
                <span class="text-base">👍</span> Like
            </button>
            <button class="flex flex-col items-center gap-1 text-xs hover:text-blue-600 transition-colors">
                <span class="text-base">💬</span> Comment
            </button>
            <button class="flex flex-col items-center gap-1 text-xs hover:text-blue-600 transition-colors">
                <span class="text-base">🔁</span> Repost
            </button>
            <button class="flex flex-col items-center gap-1 text-xs hover:text-blue-600 transition-colors">
                <span class="text-base">✈️</span> Send
            </button>
        </div>
    </div>
</div>