<template>
  <div class="relative inline-block">
    <!-- Sticker image -->
    <img
      v-if="!error"
      :src="stickerUrl"
      :alt="'Sticker'"
      class="max-w-[180px] max-h-[180px] object-contain"
      :class="{ 'animate-pulse bg-[var(--wa-bg-light)] rounded-lg': loading }"
      @load="loading = false"
      @error="onError"
    />

    <!-- Error state -->
    <div
      v-if="error"
      class="w-[120px] h-[120px] flex flex-col items-center justify-center bg-[var(--wa-bg-light)] rounded-lg"
    >
      <UIcon name="i-lucide-image-off" class="w-8 h-8 text-[var(--wa-text-muted)]" />
      <span class="text-xs text-[var(--wa-text-muted)] mt-1">Sticker</span>
    </div>

    <!-- Loading placeholder -->
    <div
      v-if="loading && !error"
      class="w-[120px] h-[120px] flex items-center justify-center bg-[var(--wa-bg-light)] rounded-lg"
    >
      <UIcon name="i-lucide-loader-2" class="w-6 h-6 text-[var(--wa-text-muted)] animate-spin" />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { MediaInfo } from '~/types/message'

interface Props {
  media: MediaInfo
  instanceId: string
  messageId: string
}

const props = defineProps<Props>()

const loading = ref(true)
const error = ref(false)

const stickerUrl = computed(() => {
  if (props.media.url) return props.media.url
  return `/api/media/${props.instanceId}/${props.messageId}`
})

const onError = () => {
  loading.value = false
  error.value = true
}
</script>
