<script lang="ts">
  import { link } from "@dvcol/svelte-simple-router/router";

  let {
    place,
    name,
    elo,
    playerID,
  }: { place: number; name: string; elo: number; playerID: string } = $props();

  function getPlaceClass(place: number) {
    if (place == 1) return "bg-yellow-500";
    if (place == 2) return "bg-slate-500";
    if (place == 3) return "bg-amber-800";
    return "bg-slate-800";
  }

  let placeClass = $derived(getPlaceClass(place));
</script>

<a use:link href="/player/{playerID}">
  <div class="flex justify-between w-full border rounded-xl my-3 min-h-10">
    <div class="{placeClass} px-3 py-1 rounded-l-xl flex items-center">{place}.</div>
    <div class=" py-1 flex items-center">{name}</div>
    <div class="rounded-r-xl px-3 py-1 bg-blue-400 flex items-center">{elo}</div>
  </div>
</a>
