<!-- Список соц-ссылок с иконками -->
<template>
  <div class="info-socials">
    <NuxtLink
      v-for="(item, index) in items"
      :key="`info-social-${index}`"
      :to="Array.isArray(item.name) ? item.name[0] : item.name"
      :aria-label="item.title"
      :title="item.title"
      class="info-socials__item"
      target="_blank"
    >
      <img
        :width="iconSize"
        :height="iconSize"
        :src="`/icons/socials/${knownIcons.includes(item?.icon?.toLowerCase() || '') ? item?.icon?.toLowerCase() : 'globe'}.svg`"
        :alt="item?.icon"
      >
    </NuxtLink>
  </div>
</template>

<script setup lang="ts">
import type { ILinkItem } from '../../types';

withDefaults(
    defineProps<{
      items: ILinkItem[];
      knownIcons: string[];
      iconSize?: string
    }>(), {
      iconSize: '24'
    });
</script>

<style lang="scss">
.info-socials {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: start;

  @include from-br(sm) {
    margin-inline: 0;
    gap: 12px;
  }
}

.info-socials__item {
  --size: 32px;

  display: grid;
  place-content: center;
  aspect-ratio: 1/1;
  width: var(--size);
  height: var(--size);
  background-color: $info-socials-bg;
  border-radius: $radius-full;
  color: $info-socials-icon;

  @include from-br(sm) {
    --size: 28px;
  }

  @include hover(background-color) {
    background-color: $info-socials-bg--hover;
  }
}

.info-socials__item img {
  @include from-br(sm) {
    width: 14px;
    height: 14px;
  }
}
</style>
