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

<div class="bg-white rounded-xl border border-gray-200 p-4 text-[13px]">
    <div class="flex items-start gap-3">
        <img src="{{ $avatar }}" class="w-10 h-10 rounded-full object-cover shrink-0" alt="">
        <div class="flex-1 min-w-0">
            <div class="flex items-center gap-1 mb-1">
                <span class="font-bold text-gray-900">{{ $name }}</span>
                <svg class="w-4 h-4 text-blue-400" viewBox="0 0 24 24" fill="currentColor"><path d="M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91C2.88 9.33 2 10.57 2 12s.88 2.67 2.19 3.34c-.46 1.39-.2 2.9.81 3.91s2.52 1.26 3.91.8c.66 1.31 1.91 2.19 3.34 2.19s2.67-.88 3.33-2.19c1.39.46 2.9.2 3.91-.81s1.27-2.52.81-3.91C21.37 14.67 22.25 13.43 22.25 12z"/></svg>
                <span class="text-gray-400">@{{ $handle }}</span>
                <span class="text-gray-300 mx-1">·</span>
                <span class="text-gray-400">{{ $scheduledAt }}</span>
            </div>
            <p class="text-gray-800 whitespace-pre-wrap break-words">{{ $caption }}</p>
            @if($hashtagString)
                <p class="text-blue-400 mt-1">{{ $hashtagString }}</p>
            @endif
            @if($media)
                <img src="{{ $media }}" class="mt-2 rounded-xl w-full object-cover max-h-48" alt="">
            @else
                <div class="mt-2 h-32 bg-gray-100 rounded-xl flex items-center justify-center">
                    <span class="text-gray-300 text-xs">No image</span>
                </div>
            @endif
            <div class="flex gap-6 mt-3 text-gray-400">
                <span>💬 0</span><span>🔁 0</span><span>❤️ 0</span><span>📊</span>
            </div>
        </div>
    </div>
</div>