<template>
    <div class="social-networks">
        <h2>{{ $t("followUs") }}</h2>
        <ul>
            <li v-for="({url, icon}, i) in socials" :key="i">
                <a :href="url" target="_blank">
                    <img :src="`/icons/${icon}.svg`" />
                </a>
            </li>
        </ul>
    </div>
</template>

<script setup>
const socials = reactive([
    { url: "/", icon: "linkedin" },
    { url: "/", icon: "telegram" },
    { url: "/", icon: "whatsapp" },
    { url: "/", icon: "instagram" },
]);
</script>

<style lang="scss">
footer .social-networks {
    @apply bg-zinc-100 rounded-xl border-2 border-neutral-200;
    @apply flex flex-col items-center justify-between px-6;
    @apply w-full h-auto gap-4 py-4;
    @apply lg:w-[57.7rem] lg:h-[4.5rem] md:flex-row;

    h2 {
        @apply text-zinc-800 text-lg font-medium font-vazir leading-[1.9rem];
    }

    ul {
        @apply flex gap-2;

        li {
            @apply w-max h-max;
            a {
                @apply w-10 h-10 bg-[#B2B2B2] hover:bg-[#43E97B] rounded-full flex items-center justify-center;
                img {
                    @apply h-6 w-6 object-scale-down;
                }
            }
        }
    }
}
</style>
