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

  let commander = $state([])
  let creature = $state([])
  let instant = $state([])
  let planeswalker = $state([])
  let artifact = $state([])
  let sorcery = $state([])
  let enchantment = $state([])
  let land = $state([])
  let slug = $derived(data.slug)
  let test = $state("")

  $effect(() => {
    commander = creature = instant = planeswalker = artifact = sorcery = enchantment = []

    fetch("/json/brawlset/"+slug)
        .then( response => response.json() )
        .then( data => {
            commander = data.Cards.commander
            creature = data.Cards.creature
            sorcery = data.Cards.sorcery
            instant = data.Cards.instant
            land = data.Cards.land
            enchantment = data.Cards.enchantment
            artifact = data.Cards.artifact
            planeswalker = data.Cards.planeswalker
          })
	});
</script>

<div class="flex flex-col w-full items-center">
  <h1>{slug}</h1>

  <h2>Commandants</h2>
  <CardGrid>
    {#each commander as card}
      <Card card={card} isCommander={true} showUrl={true} />
    {/each}
  </CardGrid>

  <h2>Planeswalker</h2>
  <CardGrid>
    {#each planeswalker as card}
      <Card card={card}/>
    {/each}
  </CardGrid>

  <h2>Creature</h2>
  <CardGrid>
    {#each creature as card}
      <Card card={card}/>
    {/each}
  </CardGrid>

  <h2>Rituels</h2>
  <CardGrid>
    {#each sorcery as card}
      <Card card={card}/>
    {/each}
  </CardGrid>

  <h2>Artefacts</h2>
  <CardGrid>
    {#each artifact as card}
      <Card card={card}/>
    {/each}
  </CardGrid>

  <h2>Éphémères</h2>
  <CardGrid>
    {#each instant as card}
      <Card card={card}/>
    {/each}
  </CardGrid>

  <h2>Enchantements</h2>
  <CardGrid>
    {#each enchantment as card}
      <Card card={card}/>
    {/each}
  </CardGrid>

  <h2>Terrains</h2>
  <CardGrid>
    {#each land as card}
      <Card card={card}/>
    {/each}
  </CardGrid>
</div>
