<template>
    <a
        :href="buildImageUrl(id, bigSize)"
        target="_blank"
        rel="noopener"
        class="d-inline-block"
        @click.prevent="$eventHub.$emit('lightbox', buildImageUrl(id, bigSize))"
    >
        <img :src="buildImageUrl(id, smallSize)" class="border rounded-2" :style="`height: ${size}; width: auto;`" loading="lazy">
    </a>
</template>

<script>
import { buildImageUrl } from '../src/helpers.js';

export default {
    props: {
        id: { required: true },
        smallSize: { default: 'thumb' },
        bigSize: { default: 'big' },
        size: { default: 'auto' },
    },
    methods: { buildImageUrl },
};
</script>
