<template>
    <component v-if="!asChild" :is="as" :class="cx('root')" v-bind="attrs">
        <slot />
    </component>
    <slot v-else :class="cx('root')" :a11yAttrs="a11yAttrs" />
</template>

<script>
import { mergeProps } from 'vue';
import BaseGalleryThumbnail from './BaseGalleryThumbnail.vue';

export default {
    name: 'GalleryThumbnail',
    extends: BaseGalleryThumbnail,
    inheritAttrs: false,
    inject: ['$pcGallery'],
    computed: {
        attrs() {
            return mergeProps(this.a11yAttrs, this.ptmi('root'));
        },
        a11yAttrs() {
            return {
                'data-pc-name': 'gallerythumbnail',
                'data-pc-section': 'root',
                autoSize: this.autoSize,
                loop: this.loop,
                align: this.align,
                spacing: this.spacing,
                slide: this.$pcGallery?.d_activeIndex
            };
        }
    }
};
</script>
