<template>
  <div>
    <div class="elements mb-16">
      <span class="requirements"> Requirements </span>

      <div>
        <UiIconSSocialCard class="mr-4 text-clr-grey-400 d-inline-block" />
        <span class="text"> Organization data </span>
      </div>

      <div>
        <UiIconSExcursion class="mr-4 text-clr-grey-400" />
        <span class="text">Identity verification </span>
      </div>
    </div>

    <div
      v-for="block in propertyBlocks"
      :key="block.title"
      class="elements"
    >
      <span class="title">
        {{ block.title }}
      </span>

      <h5 class="text-clr-grey-500">
        {{ block.underTitle }}
      </h5>

      <VerificationProperty
        v-for="property in block.properties"
        :key="property.title"
        :title="property.title"
        :text="property.text"
      />
    </div>
  </div>
</template>

<script setup>
const propertyBlocks = [
  {
    title: 'Restrictions',
    underTitle: 'Invoices',
    properties: [
      { title: 'Invoice creation', text: 'unlimited' },
      { title: 'Commission for creating an invoice is', text: '0.5 USDT' },
    ],
  },
  {
    underTitle: 'Withdrawal of funds',
    properties: [
      { title: 'Commission for withdrawal is', text: '2.5 USDT + 1%' },
    ],
  },
]
</script>

<style lang="scss" scoped>
.elements {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.title{
  @include txt-m-b;
}

.text{
  @include txt-r-m;
  color: $clr-grey-500;
}

.requirements{
  @include txt-m-b;
}
</style>
