<template>
  <h3 class="title is-5">{{ title }}</h3>
  <div v-if="scoreboard">
    <div v-bind:key="$index" v-for="(score, $index) in sortedScoreboard">
      <p class="">
        <span class="title is-5">{{ score.name }}</span>
        <span class="is-size-5 ml-4">{{ score.score }}</span>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const { title, scoreboard } = defineProps(['scoreboard', 'title'])

const sortedScoreboard = computed(() => {
  const copy = [...(scoreboard || [])]
  return copy.sort((a, b) => b.score - a.score)
})
</script>

<style scoped></style>
