<script setup>
import { ImageIcon } from 'lucide-vue-next'

const props = defineProps({
  src: {
    type: String,
    default: '',
  },
  alt: {
    type: String,
    default: '',
  },
  imgClass: {
    type: String,
    default: '',
  },
  fallbackClass: {
    type: String,
    default: '',
  },
  label: {
    type: String,
    default: 'Article',
  },
  loading: {
    type: String,
    default: 'lazy',
  },
  decoding: {
    type: String,
    default: 'async',
  },
  referrerpolicy: {
    type: String,
    default: 'no-referrer',
  },
})

const failed = ref(false)
const normalizedSrc = computed(() => String(props.src || '').trim())
const showImage = computed(() => normalizedSrc.value && !failed.value)

watch(
  () => props.src,
  () => {
    failed.value = false
  },
)
</script>

<template>
  <img
    v-if="showImage"
    :src="normalizedSrc"
    :alt="alt"
    :class="imgClass"
    :loading="loading"
    :decoding="decoding"
    :referrerpolicy="referrerpolicy"
    @error="failed = true"
  >
  <div
    v-else
    :class="fallbackClass || imgClass"
    class="relative overflow-hidden bg-slate-900"
  >
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(249,115,22,0.22),transparent_55%)]" />
    <div class="absolute inset-0 bg-[linear-gradient(160deg,rgba(15,23,42,0.92),rgba(30,41,59,0.98))]" />
    <div class="relative z-10 flex h-full w-full items-center justify-center px-3 text-center text-white/70">
      <div class="flex flex-col items-center gap-2">
        <ImageIcon class="h-5 w-5 text-brand-orange" />
        <span class="text-[10px] font-bold uppercase tracking-[0.24em]">{{ label }}</span>
      </div>
    </div>
  </div>
</template>
