<script setup lang="ts">
import { defineProps, ref, computed } from 'vue';

const props = defineProps({
  label: {
    type: String,
    required: true,
  },
  value: {
    type: [String, Number],
    default: '',
  },
  icon: {
    type: String,
    default: '',
  },
  color: {
    type: String,
    default: 'is-primary',
  },
});
</script>

<template>
  <!-- Level summary line -->
  <nav class="level is-mobile" style="width: 100%;">
    <div class="level-left">
      <!-- Left side with icon and label -->
      <div class="level-item">
        <span class="icon" v-if="icon">
          <i :class="icon"></i>
        </span>
        <span>{{ label }}</span>
      </div>
    </div>
    <div class="level-right">
      <!-- Right side with value -->
      <div class="level-item">
        <span style="font-weight: bold;">
          {{ value }}
        </span>
      </div>
    </div>
  </nav>
</template>

<style scoped>

</style>