<script>
  let { src, name } = $props()
</script>

<div class="image-viewer">
  <img {src} alt={name} decoding="async" loading="eager" />
</div>

<style>
  .image-viewer {
    display: flex;
    justify-content: center;
    padding: 16px;
  }
  img {
    max-width: 100%;
    max-height: 85vh;
    border: 3px solid var(--retro-border);
    box-shadow: 6px 6px 0px var(--retro-shadow);
    image-rendering: auto;
  }
</style>
