<template>
  <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:'Minimum amount in the invoice is', text:' 5 USDT'},
  {title:'Commission for creating an invoice is', text:'0.5 USDT'},
  {title:'Limit for creating invoices is', text:'200 per day, 1000 per month'},
]},
{
  underTitle: 'Withdrawal of funds',
      properties:[
  {title:'Minimum withdrawal amount is', text:'5 USDT'},
  {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;
  }
</style>