<script lang="ts">
  import type { CharacterWithRelations } from '$lib/server/daily-character';
  export let selectedCharacters: CharacterWithRelations[] = [];
</script>

<div class="mt-8 rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur sm:p-8">
  <h2 class="text-sm font-semibold uppercase tracking-[0.2em] text-amber-100">Historique</h2>

  {#if selectedCharacters.length === 0}
    <p class="mt-4 text-sm text-slate-400">Aucun personnage sélectionné</p>
  {:else}
    <ol class="mt-6 divide-y divide-white/10">
      {#each selectedCharacters as char, index (char.id)}
        <li class="flex items-center gap-4 py-4 sm:py-5">
          <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-amber-200/30 bg-slate-900/70 text-sm font-semibold text-amber-100">
            {index + 1}
          </span>

          {#if char.pictureUrl}
            <img src={char.pictureUrl} alt={char.name} class="h-12 w-12 rounded-full object-cover border border-amber-200/30" />
          {:else}
            <div class="flex h-12 w-12 items-center justify-center rounded-full border border-amber-200/30 bg-slate-800 text-xs text-slate-400">?</div>
          {/if}

          <span class="text-base font-medium text-slate-100">{char.name}</span>
        </li>
      {/each}
    </ol>
  {/if}
</div>
