@props([
    'titulo',
    'subtitulo',
    'descricao',
    'botao_texto',
    'botao_url',
    'exibir_botao',
    'imagens' => null,
    'tagembed_id',
    'aplicar_estilo'
])
<div class="bg-white my-10 sm:my-32 px-8">
    <div class="max-w-[42.5rem] mx-auto text-center">
        <x-typography.sobrancelha> {{ $titulo }}</x-typography.sobrancelha>
        <x-typography.titulo>
            {{ $descricao }}
        </x-typography.titulo>
    </div>

    @if(!empty($tagembed_id))
        <x-tagembed :tagembed_id="$tagembed_id" :aplicar_estilo="$aplicar_estilo ?? false"/>
    @elseif(!empty($imagens))
        <div class="flex flex-col sm:flex-row gap-6 justify-between mt-8 sm:mt-0 sm:px-0">
            @foreach ($imagens as $imagem)
                <img src="{{ asset('storage/' . $imagem['imagem']) }}" alt="{{ $imagem['imagem_alt'] ?? $titulo ?? 'Imagens Instagram' }}" title="{{ $imagem['imagem_title'] ?? '' }}"
                     class="flex-1 rounded-3xl aspect-square object-cover sm:w-[286px] sm:h-[286px]">
            @endforeach
        </div>
    @endif

    @if ($exibir_botao)
        <div class="flex items-center justify-center mt-12">
            <x-botao-principal href="{{ $botao_url }}" class="gap-2" target="_blank">
                <x-icons.instagram width="24" height="24" />
                {{ $botao_texto }}
            </x-botao-principal>
        </div>
    @endif
</div>