<template>
  <img
    :src="value.url"
    :srcset="srcset"
    class="image-block"
    alt=""
    @click="openFullscreen"
  />
</template>

<script>
export default {
  props: ['value'],
  computed: {
    srcset() {
      if (this.value.url.includes('ucarecdn')) {
        return (
          this.value.url +
          '-/resize/300/ 300w,' +
          this.value.url +
          '-/resize/800/ 800w,'
        );
      }
      return this.value.url;
    },
  },
  methods: {
    openFullscreen() {
      this.$store.dispatch('showFullscreenImage', this.value.url);
    },
  },
};
</script>

<style scoped lang="scss">
.image-block {
  width: 100%;
  max-width: 100%;
  border-radius: 13px;

  margin-bottom: 30px;
}
</style>
