@props(['file', 'caption' => null])

@php
  // Bild aus public/img/docs/ — solange keiner da ist, zeigt ein Platzhalter
  // exakt den Dateinamen, den du ablegen musst.
  $rel = 'img/docs/' . $file;
  $exists = is_file(public_path($rel));
@endphp

<figure class="my-5 overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60">
  @if ($exists)
    <img src="{{ asset($rel) }}?v={{ filemtime(public_path($rel)) }}" alt="{{ $caption ?? $file }}" class="block w-full" loading="lazy">
  @else
    <div class="flex flex-col items-center justify-center gap-2 px-4 py-12 text-center">
      <svg class="h-8 w-8 text-zinc-300 dark:text-zinc-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-4.5-4.5L7 21"/>
      </svg>
      <p class="text-[13px] font-medium text-zinc-500 dark:text-zinc-400">Screenshot hier ablegen:</p>
      <code class="rounded bg-zinc-200 dark:bg-zinc-800 px-2 py-1 text-[12px] text-zinc-600 dark:text-zinc-300">public/img/docs/{{ $file }}</code>
    </div>
  @endif
  @if ($caption)
    <figcaption class="border-t border-zinc-200 dark:border-zinc-800 px-4 py-2.5 text-[12.5px] text-zinc-500 dark:text-zinc-400">{{ $caption }}</figcaption>
  @endif
</figure>