<script setup lang="ts">
import ItemList from '@/components/ItemList.vue'
import ItemListElement from '@/components/ItemListElement.vue'
import IconPlus from '@/components/icons/IconPlusCircle.vue'

import { useBoardStore } from '@/stores/boardStore'
import { ref } from 'vue'

const store = useBoardStore()
const users = ref(store.getCurrentBoard().users)
</script>

<template>
  <ItemList title="Mitglieder">
    <ItemListElement
      v-for="user in users"
      :key="user.name"
      :icon="user.getInitials()"
      :title="user.name"
      :subtitle="(user.getTotalSpending() / 100).toFixed(2) + '€'"
      subtitle-class="text-green-700"
    >
      <button class="btn btn-square btn-ghost">
        <IconPlus />
      </button>
    </ItemListElement>
  </ItemList>
</template>
