<template>
  <div class="content-box">

    <h4 v-if="setTitle" class="footer-title text-small text-bold visible-block bottom-margin-x-small">Redes sociais</h4>

    <div class="flex footer-social vertical-padding-x-small">
      <div v-for="(data, key) in socialMedias" :key="key">
        <a 
          target="_blank"
          :href="data.url" 
          :title="key" 
          :class="key"
        >
         <i :class="data.icon"></i>
        </a>
      </div>
    </div>
    
  </div>
</template>

<script>
import store from "@components/TheFooter/storeFooter.js";

export default {
  name: 'DynamicSocial',
  data() {
    return {
      socialMedias: store.state.dynamicSocialUrls,
      socialStyle: store.state.dynamicSocialStyle,
      language: store.state.languages,
    };
  },
  computed: {
    setTitle() {
      return Object.keys(this.socialMedias).length > 0 ?? false; 
    },
  },
  created() {
    document.documentElement.style.setProperty('--bg-color', this.socialStyle.deep);
    document.documentElement.style.setProperty('--font-color', this.socialStyle.font);
  },
}
</script>

<style scoped>
.footer-social a {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.6rem;
  border-radius: .25rem;
  text-align: center;
  -webkit-transition: background 150ms ease-in-out;
  transition: background 150ms ease-in-out;
  background-color: var(--bg-color);
  margin: 0 .25rem .25rem 0;
  cursor: pointer;
}
.footer-social i {
  color: var(--font-color);
}
.footer-social .facebook:hover {
  background: #3c5b9b;
}
.footer-social .twitter:hover {
  background: #359bed;
}
.footer-social .google:hover {
  background: #cb2027;
}
.footer-social .rss:hover {
  background: #fd9f13;
}
.footer-social .pinterest:hover {
  background: #cb2027;
}
.footer-social .linkedin:hover {
  background: #027ba5;
}
.footer-social .youtube:hover {
  background: #f03434;
}
.footer-social .instagram:hover {
  background: #a9714e;
}
.footer-social .blogger:hover {
  background: #f58220;
}
</style>