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

<div class="bg-white rounded-xl border border-gray-200 p-4 text-[13px]">
    <div class="flex gap-3">
        <div class="flex flex-col items-center">
            <img src="{{ $avatar }}" class="w-9 h-9 rounded-full object-cover" alt="">
            <div class="w-px flex-1 bg-gray-200 mt-2"></div>
        </div>
        <div class="flex-1 pb-4">
            <div class="flex items-center justify-between mb-1">
                <div class="flex items-center gap-1">
                    <span class="font-semibold text-gray-900">{{ $name }}</span>
                    <svg class="w-4 h-4 text-blue-500" viewBox="0 0 24 24" fill="currentColor"><path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                </div>
                <span class="text-gray-400">···</span>
            </div>
            <p class="text-gray-800 whitespace-pre-wrap break-words">{{ $caption }}</p>
            @if($media)
                <img src="{{ $media }}" class="mt-2 rounded-xl w-full object-cover max-h-48" alt="">
            @endif
            <div class="flex gap-4 mt-3 text-gray-400 text-lg">
                <button>🤍</button>
                <button>💬</button>
                <button>🔁</button>
                <button>✈️</button>
            </div>
        </div>
    </div>
    <p class="text-gray-400 pl-12 text-xs">Reply · {{ rand(0, 100) }} likes</p>
</div>