@props(['caption' => '', 'media' => null, 'name' => 'User', 'hashtagString' => ''])

<div class="bg-black rounded-xl overflow-hidden text-white text-[13px] relative" style="aspect-ratio: 9/16; max-height: 380px;">
    {{-- Background --}}
    @if($media)
        <img src="{{ $media }}" class="absolute inset-0 w-full h-full object-cover" alt="">
        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
    @else
        <div class="absolute inset-0 bg-gradient-to-br from-gray-900 to-black flex items-center justify-center">
            <svg class="w-16 h-16 text-gray-700" fill="currentColor" viewBox="0 0 24 24">
                <path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.34 6.34 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.82a8.18 8.18 0 004.78 1.52V6.89a4.85 4.85 0 01-1.01-.2z"/>
            </svg>
        </div>
    @endif

    {{-- Right side actions --}}
    <div class="absolute right-3 bottom-24 flex flex-col items-center gap-5 text-white">
        <div class="flex flex-col items-center"><span class="text-2xl">❤️</span><span class="text-xs">0</span></div>
        <div class="flex flex-col items-center"><span class="text-2xl">💬</span><span class="text-xs">0</span></div>
        <div class="flex flex-col items-center"><span class="text-2xl">↗️</span><span class="text-xs">Share</span></div>
    </div>

    {{-- Bottom text --}}
    <div class="absolute bottom-0 left-0 right-12 p-4">
        <p class="font-semibold mb-1">@{{ $name }}</p>
        <p class="text-sm line-clamp-2 opacity-90">{{ $caption }}</p>
        @if($hashtagString)
            <p class="text-xs text-white/70 mt-1">{{ $hashtagString }}</p>
        @endif
    </div>
</div>