<script>
  /**
   * Reusable photo gallery with prev/next arrows and indicator.
   * @type {{
   *   photos: string[],
   *   height?: string,
   *   thumbs?: boolean,
   *   counter?: boolean,
   *   onStep?: (e: Event) => void,
   * }}
   */
  let { photos, height = '220px', thumbs = false, counter = false } = $props();

  let idx = $state(0);

  function prev(e) {
    e?.stopPropagation();
    idx = (idx - 1 + photos.length) % photos.length;
  }
  function next(e) {
    e?.stopPropagation();
    idx = (idx + 1) % photos.length;
  }
  function go(i, e) {
    e?.stopPropagation();
    idx = i;
  }

  // Reset when photos change (e.g. navigating to a different entry)
  $effect(() => {
    photos;
    idx = 0;
  });
</script>

{#if photos.length > 0}
  <div class="gallery" style="--gallery-height: {height}">
    <img class="gallery-img" src={photos[idx]} alt="photo {idx + 1}" loading="lazy" />

    {#if photos.length > 1}
      <button class="arr left" onclick={prev} aria-label="Previous photo">‹</button>
      <button class="arr right" onclick={next} aria-label="Next photo">›</button>

      {#if thumbs}
        <div class="thumb-strip">
          {#each photos as photo, i}
            <button class="thumb" class:active={i === idx} onclick={(e) => go(i, e)} aria-label="Photo {i + 1}">
              <img src={photo} alt="" />
            </button>
          {/each}
        </div>
      {:else}
        <div class="dots">
          {#each photos as _, i}
            <button class="pip" class:active={i === idx} onclick={(e) => go(i, e)} aria-label="Photo {i + 1}"></button>
          {/each}
        </div>
      {/if}
    {/if}

    {#if counter}
      <span class="counter">{idx + 1} / {photos.length}</span>
    {/if}
  </div>
{/if}

<style>
  .gallery {
    position: relative;
    overflow: hidden;
    background: #000;
  }

  .gallery-img {
    width: 100%;
    height: var(--gallery-height);
    object-fit: cover;
    display: block;
  }

  .arr {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    z-index: 2;
    width: 36px;
    height: 36px;
  }
  .arr:hover { background: rgba(0,0,0,0.7); }
  .arr.left  { left: 10px; }
  .arr.right { right: 10px; }

  /* Dot indicators (timeline cards) */
  .dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 2;
  }
  .pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, transform 0.15s;
  }
  .pip.active { background: #fff; transform: scale(1.3); }

  /* Thumbnail strip (detail page) */
  .thumb-strip {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
  }
  .thumb {
    width: 52px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    opacity: 0.65;
    background: none;
    transition: border-color 0.15s, opacity 0.15s;
  }
  .thumb.active { border-color: #fff; opacity: 1; }
  .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Photo counter badge */
  .counter {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 12px;
    font-weight: 300;
    color: #fff;
    background: rgba(0,0,0,0.45);
    padding: 3px 10px;
    border-radius: 20px;
    z-index: 2;
  }

  @media (max-width: 600px) {
    .thumb { width: 40px; height: 28px; }
  }
</style>
