<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';

withDefaults(
  defineProps<{
    label: string;
    value: string;
    icon?: string;
    iconSize?: string;
  }>(),
  {
    label: '-',
    value: '-',
  },
);
</script>

<template>
  <article class="row items-center">
    <Icon
      v-if="icon"
      :icon
      class="app-text-muted q-pr-sm"
      :width="iconSize || '2rem'"
    />
    <span class="column">
      <span class="app-text-muted-2 text-caption">
        {{ label }}
      </span>
      <span class="text-weight-medium">
        {{ value }}
      </span>
    </span>
  </article>
</template>
