<template>
  <div class="container">
    <div class="row justify-content-md-center">
      <div v-for="(media, i) in resortMedia" :key="i">
        <div v-if="media.prCategory === 'Facebook'">
          <a :href="`${media.prSite}`" target="_blank">
            <img src="../../../../../public/img/icons/facebook.png" class="img_media" />
          </a>
        </div>
        <div v-if="media.prCategory === 'Twitter'">
          <a :href="`${media.prSite}`" target="_blank">
            <img src="../../../../../public/img/icons/twitter.png" class="img_media" />
          </a>
        </div>
        <div v-if="media.prCategory === 'YouTube'">
          <a :href="`${media.prSite}`" target="_blank">
            <img src="../../../../../public/img/icons/YouTube.png" class="img_media" />
          </a>
        </div>
        <div v-if="media.prCategory === 'Website'">
          <a :href="`${media.prSite}`" target="_blank">
            <img src="../../../../../public/img/icons/www.png" class="img_media" />
          </a>
        </div>
        <div v-if="media.prCategory === 'WalkThrough'">
          <a :href="`${media.prSite}`" target="_blank">
            <img src="../../../../../public/img/icons/Walking.png" class="img_media" />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  name: "resortMedia",
  props: {
    resortCode: ""
  },
  methods: {
    ...mapActions("resort", ["getResortMedia"])
  },
  computed: {
    ...mapState("resort", ["resortMedia"])
  },
  mounted() {
    this.getResortMedia(this.resortCode);
  }
};
</script>

<style lang="scss" scoped>
.img_media {
  height: 100px;
  width: 100px;
  margin: 10px;
}
</style>
