<script>
  let { card, showUrl = false, isCommander = false, showSynergy = false } = $props()
</script>

<div class="flex flex-col w-full gap-0">
  {#if showUrl}
    <a class="w-full relative" href={card.Url}>
      {#if card.Banned}
        <img class="absolute w-full top-60 md:top-20 rotate-30" src="/assets/banned.png" alt="banned card icon"/>
      {/if}
      <img src={card.NormalImage} alt={"Scan de carte pour " + card.Name} class="w-full rounded-md aspect-[488/680]" loading="lazy"/>
    </a>
  {:else}
    <div class="w-full relative">
      {#if card.Banned}
        <img class="absolute w-full top-60 md:top-20 rotate-30" src="/assets/banned.png" alt="banned card icon"/>
      {/if}
      <img src={card.NormalImage} alt={"Scan de carte pour " + card.Name} class="w-full rounded-md aspect-[488/680]" loading="lazy"/>
    </div>
  {/if}
  <a href={card.CardmarketUri} target="_blank" class="text-xs w-full text-center mt-2">{card.Price}€</a>
  <span class="w-full text-center text-xs">{card.Name}</span>
  {#if isCommander}
    <span class="w-full text-center">{card.NumberOfDecks} Decks</span>
  {:else}
    <span class="w-full text-center">{card.NumberOfDecks} Decks sur {card.NumberOfPossibleDecks} ({card.NumberOfPossibleDecks != 0 ? Math.round(100 * (card.NumberOfDecks / card.NumberOfPossibleDecks)) : 0}%)</span>
  {/if}
  {#if showSynergy}
    <span class="w-full text-center">Synergy {card.Synergy > 0 ? "+" + Math.round(100*card.Synergy).toString() : Math.round(100*card.Synergy).toString()}%</span>
  {/if}
</div>
