<script lang="ts">
  import Card from '$lib/components/Card.svelte';
  import CardGrid from '$lib/components/CardGrid.svelte';
    import CommanderIcon from '$lib/components/icons/CommanderIcon.svelte';
	import type { PageProps } from './$types';
	let { data }: PageProps = $props();

  let commander = $state([])
  let slug = $derived(data.slug)

  const colorCorrespondance = {
    "white": "W",
    "blue": "U",
    "black": "B",
    "red": "R",
    "green": "G",
    "azorius": "UW",
    "dimir": "BU",
    "rakdos": "BR",
    "gruul": "GR",
    "selesnya": "GW",
    "orzhov": "BW",
    "izzet": "RU",
    "golgari": "BG",
    "boros": "RW",
    "simic": "GU",
    "esper": "BUW",
    "grixis": "BRU",
    "jund": "BGR",
    "naya": "GRW",
    "bant": "GUW",
    "abzan": "BGW",
    "jeskai": "RUW",
    "sultai": "BGU",
    "mardu": "BRW",
    "temur": "GRU",
    "yore-tiller": "BRUW",
    "glint-eye": "BGRU",
    "dune-brood": "BGRW",
    "ink-treader": "GRUW",
    "witch-maw": "BGUW",
    "five-colors": "BGRUW",
  }

  $effect(() => {
    commander = []
  
    let api_slug = ""
    if(slug == "all") api_slug = "all"
    else if(slug == "colorless") api_slug = "colorless"
    else api_slug = colorCorrespondance[slug]

    fetch("/json/top/commander/"+api_slug)
        .then( response => response.json() )
        .then( data => {
            commander = data
          })
	});
</script>

<div class="flex flex-col w-full items-center">
  <div class="max-w-6xl w-full p-4 sticky top-16 bg-white z-10 flex-row flex items-center gap-2">
    <CommanderIcon />
    <h2 class="font-beleren text-2xl">Top Commandants {slug != "all" ? "- " + slug.charAt(0).toUpperCase() + slug.slice(1) : ""}</h2>
  </div>
  <CardGrid>
    {#each commander as card}
      <Card card={card} isCommander={true} showUrl={true} />
    {/each}
  </CardGrid>
</div>
