<template>
  <router-link
    :to="{ name: 'show', params: { showId: show.id } }"
    class="tw-rounded-md tw-overflow-hidden tw-bg-white tw-h-full tw-text-inherit tw-group hocus:tw-no-underline tw-border-solid tw-border tw-transition tw-border-black/5"
  >
    <Image :image="showImage" class="tw-w-full tw-aspect-[16/5] tw-bg-gray-200" />
    <div class="tw-relative tw-min-h-[100px] tw-p-6">
      <Image
        :image="showLogo"
        class="tw-w-20 tw-rounded tw-border-black/5 tw-border tw-border-solid tw-bg-gray-400 tw-absolute -tw-top-10 tw-left-6 tw-shadow"
        square
      />
      <SafeHTML
        :html="show.name"
        sanitize-preset="inline-noninteractive"
        as="p"
        class="tw-font-semibold tw-text-xl tw-ml-24 -tw-mt-4 group-hocus:tw-underline tw-truncate"
      />
      <div class="tw-text-gray-600">
        <SafeHTML sanitize-preset="inline-noninteractive" :html="show.shortDescription" />
      </div>
    </div>
  </router-link>
</template>

<script lang="ts" setup>
import { Show } from '@/types'
import { useImage } from '@/stores/images'
import Image from '@/components/generic/Image.vue'
import SafeHTML from '@/components/generic/SafeHTML'

defineOptions({ compatConfig: { MODE: 3 } })

const props = defineProps<{
  show: Show
}>()
const showImage = useImage(() => props.show.imageId)
const showLogo = useImage(() => props.show.logoId)
</script>