<script setup lang="ts">
/** Browser-/Admin-Fenster-Mockup mit Auto-Platzhalter, wenn die PNG fehlt. */
const props = defineProps<{
  file: string
  title: string
  icon: string
  url?: string
}>()
const failed = ref(false)
</script>

<template>
  <div
    class="w-full rounded-xl overflow-hidden border border-white/10 bg-gray-900 shadow-2xl shadow-primary-950/40"
  >
    <div class="flex items-center gap-1.5 px-3 h-8 bg-gray-800/80 border-b border-white/5">
      <span class="w-2.5 h-2.5 rounded-full bg-red-400/70" />
      <span class="w-2.5 h-2.5 rounded-full bg-yellow-400/70" />
      <span class="w-2.5 h-2.5 rounded-full bg-green-400/70" />
      <span class="ml-3 text-[11px] text-muted font-mono">{{ props.url || "admin.rebreak.org" }}</span>
    </div>
    <div class="aspect-[16/10] bg-black">
      <img
        v-if="!failed"
        :src="`/preview/${props.file}`"
        :alt="props.title"
        class="w-full h-full object-cover"
        loading="lazy"
        @error="failed = true"
      />
      <div
        v-else
        class="w-full h-full flex flex-col items-center justify-center gap-3 bg-linear-to-b from-gray-900 to-gray-950 px-6 text-center"
      >
        <div class="w-12 h-12 rounded-2xl bg-primary-500/15 flex items-center justify-center">
          <UIcon :name="props.icon" class="text-primary-400 text-2xl" />
        </div>
        <p class="text-sm font-bold text-highlighted">{{ props.title }}</p>
        <p class="text-[11px] text-muted leading-snug">
          Screenshot folgt<br />
          <span class="font-mono">preview/{{ props.file }}</span>
        </p>
      </div>
    </div>
  </div>
</template>
