<script>
  /**
   * Bearer 인증 이미지 endpoint 를 <img> 로 표시.
   * fetch + blob URL 패턴 — img 태그가 Authorization 헤더를 못 보내는 한계 우회.
   * unmount 시 URL.revokeObjectURL 로 메모리 정리.
   */
  import { getAccessToken } from '$lib/api';

  let { src, alt = '', class: klass = '' } = $props();
  let blobUrl = $state('');
  let errored = $state(false);

  $effect(() => {
    let active = true;
    let url = '';
    if (!src) return () => {};
    (async () => {
      try {
        const accessToken = getAccessToken();
        const res = await fetch(src, {
          headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : {},
          credentials: 'include',
        });
        if (!res.ok) {
          if (active) errored = true;
          return;
        }
        const blob = await res.blob();
        url = URL.createObjectURL(blob);
        if (active) blobUrl = url;
      } catch {
        if (active) errored = true;
      }
    })();
    return () => {
      active = false;
      if (url) URL.revokeObjectURL(url);
    };
  });
</script>

{#if errored}
  <div class={`bg-error/10 border border-error/40 text-error text-[10px] flex items-center justify-center ${klass}`}>
    이미지 로드 실패
  </div>
{:else if blobUrl}
  <img src={blobUrl} {alt} class={klass} />
{:else}
  <div class={`bg-bg/40 animate-pulse ${klass}`}></div>
{/if}
