<template>
  <div
    :class="[
      'n-flex n-gap-2',
      { 'n-align-center': row, 'n-flex-column': !row },
    ]"
  >
    <v-skeleton-loader
      v-if="isLoading"
      loading
      type="text"
      width="60"
      height="12"
      class="mb-1"
    />
    <template v-else>
      <div
        :class="[labelClass, 'n-color-main-font n-text-body2 n-font-normal']"
      >
        <slot name="labelContent">
          {{ label }}
        </slot>
      </div>
    </template>

    <v-skeleton-loader
      v-if="isLoading"
      loading
      type="text"
      width="120"
      height="12"
    />
    <template v-else>
      <div
        :class="[
          valueClass,
          { 'n-mx-1': row },
          'n-color-main-font n-text-body1 n-font-bold',
        ]"
      >
        <slot name="valueContent">
          {{ value }}
        </slot>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "NLabelAndValue",
  props: {
    label: {
      type: String,
      default: "",
    },
    value: {
      type: [String, Number],
      default: "",
    },
    labelClass: {
      type: String,
      default: "",
    },
    valueClass: {
      type: String,
      default: "",
    },
    isLoading: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Boolean,
      default: false,
    },
  },
};
</script>
