@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-center gap-2 mb-3">
            <img src="{{ $avatar }}" class="w-10 h-10 rounded-full object-cover" alt="">
            <div>
                <p class="font-semibold text-gray-900">{{ $name }}</p>
                <p class="text-gray-400 text-xs">{{ $scheduledAt }} · 🌐</p>
            </div>
            <span class="ml-auto text-gray-400">···</span>
        </div>
        <p class="text-gray-800 whitespace-pre-wrap break-words mb-2">{{ $caption }}</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 flex justify-around text-gray-500">
        <button class="flex items-center gap-1 hover:text-blue-600 transition-colors">
            <span>👍</span> Like
        </button>
        <button class="flex items-center gap-1 hover:text-blue-600 transition-colors">
            <span>💬</span> Comment
        </button>
        <button class="flex items-center gap-1 hover:text-blue-600 transition-colors">
            <span>↗️</span> Share
        </button>
    </div>
</div>