<template>
  <div class="settings-property-item">
    <Component
      :is="resolveComponent(`ui-icon-${icon}`)"
      class="settings-property-item__icon"
    />

    <div class="settings-property-item-content">
      <p class="settings-property-item-content__title">
        {{ title }}
      </p>
      <p v-if="text" class="settings-property-item-content__text">
        {{ text }}
      </p>
    </div>
  </div>
</template>

<script setup>
defineProps({
  icon: { type: String, required: true },
  title: { type: String, required: true },
  text: { type: String },
})
</script>

<style lang="scss">
.settings-property-item {
  display: flex;
  align-items: center;

  &__icon{
    color: $clr-cyan-500;
    margin-right: 10px;
  }

}

.settings-property-item-content{
  &__title {
    @include txt-i-sb;
  }

  &__text {
    @include txt-s-m;
    margin-top: 4px;
    color: $clr-grey-500;
  }
}
</style>
