<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 lang="ts">
import Vue from 'vue';
import { buildImageUrl } from '../src/helpers.ts';

export default Vue.extend({
    props: {
        id: { required: true, type: String },
        smallSize: { default: 'thumb', type: String },
        bigSize: { default: 'big', type: String },
        size: { default: 'auto', type: String },
    },
    methods: { buildImageUrl },
});
</script>
