<template>
  <div class="snt-footer">
    <div class="snt-footer__title">
      {{ title }}
    </div>
    <div class="snt-footer__list">
      <div
        v-for="(item, i) in footers"
        :key="`footer-${i}`"
        class="snt-footer__item">
        <a
          :href="item.href"
          target="_blank">
          {{ item.label }}
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    items: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {

    }
  },
  computed: {
    footers () {
      return this.items.map((item, i) => this.$_.defaults(
        this.$_.cloneDeep(item),
        {
          sequence: i + 1,
          src: '',
          visible: true
        }
      )).filter((item) => item.visible)
    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style scoped>
  .snt-footer {
    padding: 0.75em;
  }
  .snt-footer__title {
    font-weight: 500;
    font-size: 18px;
  }
  .snt-footer__item  {
    padding: 2px 8px 2px 0;
  }
  .snt-footer__item a {
    font-weight: 300;
    text-decoration: none;
    color: currentColor;
  }
  .snt-footer__list a:hover{
    color: #1ba7e1;
  }
</style>
