<template>
  <div
    class="gallery-common-item"
    :class="[!showLabel && 'gallery-common-item-hide-label', layout && `gallery-common-item-${layout}`]"
    v-show="!invisible"
  >
    <div class="gallery-common-item-label" v-if="showLabel" :title="label">{{ label }}</div>
    <div class="gallery-common-item-content">
      <slot />
      <slot name="itemComponent" />
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
import { BaseGalleryItemProps } from './props';

export default defineComponent({
  name: 'DefaultGalleryItem',
  inheritAttrs: false,
  props: {
    ...BaseGalleryItemProps
  },
  setup(props) {
    const showLabel = computed(() => {
      if (props.labelInvisible) {
        return false;
      }
      return !!props.label;
    });

    return {
      showLabel
    };
  }
});
</script>
