<template>
  <ul>
    <li v-for="item in items" :key="item" class="item">
      {{ item }}
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    items: {
      type: Array as PropType<string[]>,
      required: true,
    },
  },
});
</script>

<style lang="scss" scoped>
.item {
  position: relative;

  margin-bottom: 12px;
  padding-left: 33px;

  color: #d0d1d2;
  font-weight: 400;
  font-size: 14px;
  line-height: 192%;

  &:before {
    position: absolute;
    top: 8px;
    left: 0;

    display: inline-block;
    width: 15.26px;
    height: 12px;

    background: url('@/assets/img/static-icons/check.svg') no-repeat;
    background-size: contain;

    content: '';
  }
}
</style>
