<template>
  <div class="varification-property">
    <Component
      :is="resolveComponent(`ui-icon-${icon}`)"
      class="mr-4"
      :class="icon === 'SCheck' ? 'text-clr-green-500' : ''"
    />
    <span class="varification-property__title">

      {{ title }}

      <span class="varification-property__text">
        {{ text }}
      </span>
    </span>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: '',
  },
  text: {
    type: String,
    default: '',
  },
  icon: {
    type: String,
    default: 'SCheck',
  },
})
</script>

<style lang="scss">
.varification-property {

  color: $clr-grey-500;

  &__title {
    @include txt-r;
  }

  &__text {
    @include txt-r-b;
  }
}
</style>
