<template>
  <div class="info-item" v-bind="$attrs">
    <div class="info-item-label">
      <div class="content-holder">
        <img
          v-if="required"
          src="/imgs/required_icon.png"
          class="object-contain w-full h-full"
        />
      </div>
      <div class="text-size-16px text-[#686868]">{{ $t(label) }}</div>
    </div>
    <div v-if="!$slots.default" class="text-size-16px text-black pl-20px">
      {{ text }}
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    label: {},
    required: {},
    text: {},
  },
};
</script>

<style>
.info-item {
  @apply flex mb-40px;
}
.info-item-label {
  @apply flex w-120px items-center;
}
.info-item-label .content-holder {
  @apply w-8px h-full  mr-6px ml-17px;
}
</style>
