<template>
  <footer class="footer">
    <div class="footer__copyright">
      © {{ new Date().getFullYear() }} Sebin Nyshkim
    </div>
    <ul class="footer__linklist">
      <li class="footer__linkitem" v-for="(link, idx) in links" :key="idx">
        <a :href="link.href" class="footer__link">
          {{ link.text }}
        </a>
      </li>
    </ul>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      links: [
        { href: "https://twitter.com/SebinNyshkim", text: "Twitter" },
        { href: "https://t.me/SebinNyshkim", text: "Telegram" },
        {
          href: "https://www.furaffinity.net/user/sonofdragons",
          text: "Fur Affinity"
        }
      ]
    };
  }
};
</script>

<style lang="scss">
@import "@scss/_variables.scss";

.footer {
  background-color: $bg-color-light;
  padding: 0.5em 0;
  text-align: center;

  &__copyright {
    margin: 0;
  }

  &__linklist {
    margin: 0;
    padding: 0;
    list-style: none;

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
  }

  &__linkitem {
  }

  &__link {
    color: $copy-color;
    padding: 0.5em 0.75em;
  }
}
</style>
