<template>
  <ul class="points flex flex-col gap-20 mb-48 mobile:mb-24">
    <li
      v-for="point in points"
      :key="point.name"
      class="point flex gap-10 items-center text-gray-1200 font-semi-bold text-18">
      <div>
        <img :src="point.icon" height="24" width="24" alt="point" />
      </div>
      <span>{{ point.name }}</span>
    </li>
  </ul>
</template>

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

import point1img from '@/assets/img/pages/index/pricing-point-1.svg?url';
import point2img from '@/assets/img/pages/index/pricing-point-2.svg?url';
import point3img from '@/assets/img/pages/index/pricing-point-3.svg?url';

export default defineComponent({
  data: () => ({
    points: [
      {
        name: 'Target decision-makers',
        icon: point1img,
      },
      {
        name: 'Nurture sales leads',
        icon: point2img,
      },
      {
        name: 'Get results',
        icon: point3img,
      },
    ],
  }),
});
</script>
