<template>
  <div class="list-container">
    <div
      class="list-content"
      v-if="items.length"
      :style="{ height: $attrs.height, maxHeight: $attrs.maxHeight }"
    >
      <div
        v-for="(item, index) in items"
        :key="index"
        class="d-flex justify-content-between"
      >
        <span>{{ item.value ?? item.name ?? item.category }}</span>
        <span>{{ item.category ?? item.y }}</span>
      </div>
    </div>

    <no-data v-else />
  </div>
</template>

<script>
export default {
  props: {
    items: {
      return() {
        return [];
      },
    },
  },
};
</script>

<style scoped lang="scss">
.list-container {
  width: 100%;

  .list-content {
    height: 30em;
    overflow: auto;
  }
}
</style>
