<template>
  <div class="footer">
    <ul class="footer-menu">
      <li v-for="item of menu" :key="item.label">
        <router-link tag="a" :to="item.route">
          {{ item.label }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'AppFooter',

    props: {
      menu: { type: Array, default: () => [] }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/styles/animations";
  @import "~@/styles/colors";
  @import "~@/styles/layout";

  $social-btn-size: 40px;
  $breakpoint: 1050px;

  .footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    ul {
      list-style: none;
    }

    @media (max-width: $breakpoint) {
      align-items: center;
    }
  }

  .footer-menu {
    background: transparentize($background-primary, 0.5);
    display: flex;
    font-size: $font-size-small;
    padding: $small-gap / 2 $small-gap $small-gap;
    border-radius: $border-radius;

    a {
      color: $medium-blue;
      font-weight: 600;

      &:hover {
        color: $text-color-special;
      }

      &:focus {
        color: $text-color-base;
      }
    }

    li:not(:first-child) {
      margin-left: $base-gap;
    }
  }
</style>
