<template>
  <div class="socials-homepage-container mt-xl">
    <Title tag="h3" class="mb-m">{{ $_tr('title') }}</Title>

    <div class="social-items-container">
      <template v-for="item in socials" :key="item.icon">
        <Link
          :href="item.url"
          :inline="false"
          :style="{ backgroundColor: item.color }"
          target=" _blank"
          class="social-item mr-s"
        >
          <Icon :icon="item.icon" :color="$_theme('colorLight')" size="m" />
        </Link>
      </template>
    </div>
  </div>
</template>

<script>
import { Icon, Title } from 'inside-collection/atoms'
import { Link } from 'inside-collection/components'

export default {
  name: 'SocialsHomepage',
  $_i18nRootPath: 'customs.SOCIALS',
  components: {
    Icon,
    Title,
    Link
  },
  data() {
    return {
      socials: [
        {
          color: '#2F5D99',
          icon: 'facebook',
          url: 'https://www.facebook.com/tryba.fr/'
        },
        {
          color: '#21AFF2',
          icon: 'twitter',
          url: 'https://twitter.com/Tryba_France'
        },
        {
          color: '#1D9CCD',
          icon: 'linkedin',
          url: 'https://www.linkedin.com/company/trybafrance/'
        },
        {
          color: '#D8422A',
          icon: 'youtube',
          url: 'https://www.youtube.com/user/fenetresTryba'
        }
      ]
    }
  }
}
</script>
