<template>
  <div :class="getModifiersClass('c-social', modifiers)">
    <a v-for="(item, index) in items" :key="index" :href="item.url" :aria-label="item.title" target="_blank"
      rel="noopener noreferrer" :class="'c-social__item c-social__item--' + item.name">
      {{ item.text }}
    </a>
  </div>
</template>

<script setup lang="ts">
import type SocialItem from '../../models/SocialItem';
import type { ModifierItems } from './social.config';
import useComponentModifiers from '../../composable/useComponentModifiers';

defineProps<{
  items: SocialItem[];
  modifiers?: ModifierItems;
}>();

const { getModifiersClass } = useComponentModifiers();

</script>
