{% import "macros" as macros %}

<div class="flex items-center gap-1">
    {% set socialMedia = [
        {
            label: "Facebook",
            url: "https://facebook.com/",
            value: globalBusinessDetails.facebookUsername
        },
        {
            label: "Instagram",
            url: "https://instagram.com/",
            value: globalBusinessDetails.instagramUsername
        },
        {
            label: "Twitter",
            url: "https://twitter.com/",
            value: globalBusinessDetails.twitterHandle
        },
        {
            label: "LinkedIn",
            url: "https://linkedin.com/company/",
            value: globalBusinessDetails.linkedinPage
        },
        {
            label: "YouTube",
            url: "https://youtube.com/channel/",
            value: globalBusinessDetails.youtubeChannel
        },
    ] %}
    {% for item in socialMedia if item.value %}
        <li class="block w-1/5 px-2 mb-4 md:w-auto">
            <a href="{{ item.url ~ item.value }}" target="_blank" class="grid w-12 h-12 text-white rounded-full shrink-0 place-items-center bg-pink hover:bg-pink/90">
                <span class="sr-only">{{ item.label }}</span>
                {{ macros.icon("social/#{item.label|lower}","type-2xl") }}
            </a>
        </li>
    {% endfor %}
</div>