<script>
  let { name = "", url = "#", sanitizedName = "", smallImage = "", normalImage="", price = 0, cardmarketUri = "", numberOfDecks = 0, numberOfPossibleDecks = undefined, synergy = undefined } = $props()
</script>

<div class="flex flex-col w-full gap-0">
  <a class="w-full" href={url}><img src={normalImage} alt={"Scan de carte pour " + name} class="w-full rounded-md aspect-[488/680]" loading="lazy"/></a>
  <a href={cardmarketUri} target="_blank" class="text-xs w-full text-center mt-2">{price}€</a>
  <span class="w-full text-center text-xs">{name}</span>
  {#if numberOfPossibleDecks == undefined}
    <span class="w-full text-center">{numberOfDecks} Decks</span>
  {:else}
    <span class="w-full text-center">{numberOfDecks} Decks sur {numberOfPossibleDecks} ({numberOfPossibleDecks != 0 ? Math.round(100 * (numberOfDecks / numberOfPossibleDecks)) : 0}%)</span>
  {/if}
  {#if synergy != undefined}
    <span class="w-full text-center">Synergy {synergy > 0 ? "+" + Math.round(100*synergy).toString() : Math.round(100*synergy).toString()}%</span>
  {/if}
</div>
