@if($ad)
    <div class="ad-container my-8 flex justify-center">
        <a href="{{ $ad->target_url ?? '#' }}" target="_blank" class="block overflow-hidden rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-300">
            @if($ad->size === 'leaderboard')
                <div class="w-full max-w-[728px] aspect-[728/90] bg-slate-100 flex items-center justify-center overflow-hidden">
                    <img src="{{ asset('storage/' . $ad->image_path) }}" alt="{{ $ad->title }}" class="w-full h-full object-cover">
                </div>
            @elseif($ad->size === 'rectangle')
                <div class="w-full max-w-[300px] aspect-[300/250] bg-slate-100 flex items-center justify-center overflow-hidden">
                    <img src="{{ asset('storage/' . $ad->image_path) }}" alt="{{ $ad->title }}" class="w-full h-full object-cover">
                </div>
            @else
                <div class="w-full bg-slate-100 flex items-center justify-center overflow-hidden">
                    <img src="{{ asset('storage/' . $ad->image_path) }}" alt="{{ $ad->title }}" class="w-full h-auto">
                </div>
            @endif
        </a>
    </div>
@endif