@props([
    'data' => null
])

<div>
    <div class="footer-widget instagram-widget text-center">
        <h2 class="_h4 text-white">
            {{ translate_label($data, 'contact_title') }}
        </h2>
        <div class="widget-content">
            <div class="images-outer d-inline-flex justify-content-center gap-2 flex-wrap">
                @foreach ($data['contact_items'] ?? [] as $item)
                    <figure class="image-box" style="width: auto; margin: 0 10px !important;">
                        <x-redirect-link
                            :item-data="$item"
                            class="color-yellow1 d-block">
                            <div class="svg-container" style="width: 40px; height: 40px;">
                                {!! $item['svg_icon'] ?? '' !!}
                            </div>
                        </x-redirect-link>
                    </figure>
                @endforeach
            </div>
        </div>
    </div>

    <div>
        <h2 class="_h4 text-white mt-3">
            {{ translate_label($data, 'social_title') }}
        </h2>
        <div class="widget-content">
            <div class="images-outer d-inline-flex justify-content-center gap-2 flex-wrap">
                @foreach ($data['social_links'] ?? [] as $item2)
                    <figure class="image-box" style="width: auto; margin: 0 10px !important;">
                        <x-redirect-link
                            :item-data="$item2"
                            class="color-yellow1">
                            <div class="svg-container" style="width: 40px; height: 40px;">
                                {!! $item2['social_svg_icon'] ?? '' !!}
                            </div>
                        </x-redirect-link>
                    </figure>
                @endforeach
            </div>
        </div>
    </div>
</div>