@props(['botoes', 'video', 'video_poster'])
@if(!empty($botoes) || !empty($video))
    <div class="bg-white py-8">
        <div class="bg-midnightblue-100 sm:px-16 py-16 sm:y-24 sm:rounded-l-50xl rounded-29xl">
            @if(!empty($botoes))
                @php
                    $hasIcon = false;
                    foreach ($botoes as $botao) {
                        if (!empty($botao['icone'])) {
                            $hasIcon = true;
                            break;
                        }
                    }
                @endphp
                <div
                    class="flex flex-col gap-5 {{ !$hasIcon ? 'items-center md:justify-center' : 'items-start md:justify-between' }} justify-center md:items-center md:flex-row md:flex-wrap">
                    {{-- Item --}}
                    @foreach ($botoes as $botao)
                        <div
                            class="flex gap-3 items-center {{ !$hasIcon ? 'justify-center text-center' : '' }}">
                            @if (!empty($botao['icone']))
                                <div
                                    class="bg-white flex items-center justify-center rounded-full h-9 w-9 p-1 sm:h-11 sm:w-11 sm:p-2">
                                    <img class="" src="{{  asset('storage/' .  $botao['icone']) }}" alt="Ícone"/>
                                </div>
                            @endif
                            <div
                                class="font-bricolage font-bold text-base lg:text-xl text-white">{{ $botao['texto'] }}</div>
                        </div>
                    @endforeach
                </div>
            @endif

            {{-- Video --}}
            @if(!empty($video))
                <div class="{{ !empty($botoes) ? 'mt-9 sm:mt-16' : '' }} px-7 sm:px-0">
                    <x-video-player :video="$video" :poster="$video_poster ?? null"/>
                </div>
            @endif
        </div>
    </div>
@endif