{# Get social icons #}
{% set facebookLogo = craft.assets()
    .volume('icons')
    .title('Facebook')
    .one()
%}

{% set instagramLogo = craft.assets()
    .volume('icons')
    .title('Instagram')
    .one()
%}

<div>
	<h3 class="font-normal text-xl mb-3">Follow Us</h3>
	<ul class="flex gap-1">
		{% if businessDetails.facebookUsername %}
			<li class="bg-phillipine-grey group hover:bg-[#70736b] p-3 rounded-full transition-all">
				<a href="{{ "https://www.facebook.com/" ~ businessDetails.facebookUsername }}" target="_blank"><img class="bg-phillipine-grey group-hover:bg-[#70736b] transition-all h-6 w-6" src="{{ facebookLogo.getUrl() }}" alt="{{ facebookLogo.altText }}"/></a>
			</li>
		{% endif %}
		{% if businessDetails.instagramUsername %}
			<li class="bg-phillipine-grey group hover:bg-[#70736b] p-3 rounded-full transition-all">
				<a href="{{ "https://www.instagram.com/" ~ businessDetails.instagramUsername }}" target="_blank"><img class="bg-phillipine-grey group-hover:bg-[#70736b] transition-all h-6 w-6" src="{{ instagramLogo.getUrl() }}" alt="{{ instagramLogo.altText }}"/></a>
			</li>
		{% endif %}
	</ul>
</div>