<script setup lang="ts">
import { computed, defineEmits, defineProps } from 'vue'

import type { GalleryEntry } from 'src/types/galleries/galleryList'
import { getTitleFromEntryOrId } from 'src/utilities/galleries'

const props = defineProps<{
  entry: GalleryEntry,
  id: string,
  hideWarnings: boolean,
}>()

defineEmits<{
  (e: 'click', value: { event: Event, id: string }): void
}>()

const title = computed(() => getTitleFromEntryOrId(props.entry, props.id))
</script>

<template lang="pug">
.gallery-embed(
  @click='$emit("click", { event: $event, id })'
)
  .image-wrapper(
    :class='{ warning: !!entry.warning && !hideWarnings }'
  )
    img(
      :src='entry.thumbnailUrl || entry.url'
      :alt='entry.description || id'
    )
  .caption-wrapper
    p {{ title }}
    p.warning(
      v-if='!!entry.warning'
    ) {{ entry.warning }}
</template>

<style scoped lang="sass">

</style>
