<script setup>
const props = defineProps({
  name: String,
  value: Number,
  icon: String,
  color: String,
  index: Number,
});

const progressUnfilled = computed(() => `var(--bulma-${props.color}-85)`);
</script>
<template>
  <div class="is-flex-grow-1">
    <div class="is-flex is-justify-content-space-between">
      <p :class="`has-text-${color}-40`">{{ name }}</p>
      <p :class="['fs-18 font-bold', `has-text-${color}-30`]">{{ value }}</p>
    </div>
    <progress 
      :class="['progress is-small mt-2', `is-${color}`]"
      value="20"
      max="100"
    >
    </progress>
  </div>
  <div 
    v-if="index < 4"
    class="is-flex is-justify-content-center is-align-items-center"
    style="width: 60px; height: 48px"
  >
    <Icon 
      name="material-symbols:arrow-forward-rounded" 
      :size="24"
      class="has-text-grey-70"
    />
  </div>
</template>
<style lang="scss" scoped>
$progress-value-background-color: 'red';

.progress {
  --bulma-size-small: 0.5rem;
  background-color: v-bind(progressUnfilled);
}
</style>