<template>
  <div class="flex justify-between mt-0 mb-128 mx-auto tablet:items-center mobile:flex-col" :class="{'flex-row-reverse': isReversed }">
    <div :class="`px-80 shrink-0 laptop:px-16 laptop:${marginClass}-64 tablet:px-54 mobile:px-0 mobile:mb-32 mobile:m-auto`">
      <img
        :src="step.image"
        width="480"
        height="480"
        class="lazyload w-full h-auto"
        alt="step-image"
        loading="lazy"
      >
    </div>
    <div :class="`${paddingClass}-128`" class="tablet:px-0">
      <div class="title mb-32 text-gray-1100 font-bold text-36">
        {{ step.title }}
      </div>
      <div
        v-if="step.subtitle"
        class="subtitle mb-32 text-gray-1100 font-semi-bold text-18"
      >
        {{ step.subtitle }}
      </div>
      <div class="points flex flex-col">
        <div
          v-for="point in step.points"
          :key="point"
          class="point flex items-start relative mb-12 text-gray-1100 text-16"
        >
          <img
            :src="arrowIcon"
            class="mr-24 mt-2"
            alt="arrow-icon"
            loading="lazy"
          >
          <span class="h-full block">{{ point }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { ISteps } from './Steps.types';

import arrowIcon from '@/assets/img/icons/arrow-right.svg?url';

export default defineComponent({
  props: {
    step: {
      type: Object as PropType<ISteps.Step>,
      required: true,
    },
  },

  data: () => ({
    arrowIcon
  }),

  computed: {
    isReversed(): boolean {
      return this.step.number % 2 === 0;
    },
    paddingClass() {
      return this.isReversed ? 'pl' : 'pr';
    },
    marginClass() {
      return this.isReversed ? 'ml' : 'mr';
    }
  },
});
</script>
