<script setup lang="ts">
defineProps<{ src: string; alt?: string }>()
const emit = defineEmits<{ close: [] }>()
</script>

<template>
  <div
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/70"
    @click.self="emit('close')"
  >
    <div class="relative max-h-screen max-w-screen-lg p-4">
      <button
        class="absolute right-2 top-2 rounded bg-white/90 px-2 py-1 text-sm font-bold shadow hover:bg-white"
        @click="emit('close')"
      >
        ✕
      </button>
      <img :src="src" :alt="alt ?? 'Bild'" class="max-h-[85vh] max-w-full rounded shadow-lg object-contain" />
    </div>
  </div>
</template>
