<script setup>
import {ref} from "vue";
import {defineProps} from "vue";
const props = defineProps(['name', 'icon', 'color', 'endpoint', 'current'])
</script>

<template>
  <div>
    <div class="columns is-vcentered">
      <div class="column is-4">
        <p> {{ name }} </p>
      </div>
      <div class="column is-8">
        <p class="is-pulled-right">{{ current === null ? '' : new Intl.NumberFormat('da-DK', { style: 'currency', currency: 'DKK' }).format(current) }}</p>
        <progress class="progress" :value="props.current" max="100"
        :class="{
          'is-success': props.current > 75,
          'is-warning': props.current > 25 && props.current <= 50,
          'is-danger': props.current <= 25 && props.current !== null,
          'is-darker': props.current === null
        }"
        >15%</progress>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>