<template>
  <div class="simples">
    <div v-for="simple in data" :key="simple.label">
      <span class="label">{{ simple.label }}</span>
      <span class="value">{{ simple.value }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
export type Simple = { label: string; value: string | number }

defineProps<{ data: Simple[] }>()
defineOptions({ name: 'Simples' })
</script>

<style scoped lang="scss">
.simples {
  display: flex;

  div {
    width: 140px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;

    .label {
      color: #8c8c8c;
      font-size: 14px;
      margin-bottom: 6px;
    }

    .value {
      color: #323233;
      font-size: 24px;
    }

    &:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      width: 1px;
      height: 20px;
      background: #e9e9e9;
    }
  }
}
</style>
