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

  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 mainCardData = $state({})

  $effect(() => {
    creature = instant = planeswalker = artifact = sorcery = enchantment = []
    console.log(data)

    fetch("/json/commander/"+slug)
        .then( response => response.json() )
        .then( data => {
            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
            mainCardData = data.MainCard
          })
	});
</script>

<div class="flex flex-col w-full items-center">
  <div class="w-full max-w-64">
    <Card card={mainCardData} isCommander={true}/>
  </div>

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

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

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

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

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

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

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