<template>
  <div
    class="w-full px-8 py-8 bg-white guideCard place-items-center rounded-2xl"
  >
    <div class="relative">
      <img
        class="mx-auto w-[135px] h-[135px] object-fit"
        :src="cardData.imgUrl"
        :alt="cardData.title"
      />
      <span
        v-if="!last"
        class="
          absolute
          hidden
          -translate-x-16 -translate-y-1/2
          rtl:-translate-x-[480px] rtl:-translate-y-1/2
          left-full
          top-1/2
          rtl:transform rtl:-scale-x-100
          xl:inline
        "
      >
        <svg
          width="230"
          height="30"
          viewBox="0 0 230 30"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M229.751 28.72L218.245 29.6824L223.165 19.236L229.751 28.72ZM0.52602 27.8593C34.3864 7.82928 124.753 -19.8979 222.019 23.9733L221.197 25.7964C124.644 -17.753 34.9679 9.80905 1.54429 29.5807L0.52602 27.8593Z"
            fill="url(#paint0_linear_2485_68810)"
          />
          <defs>
            <linearGradient
              id="paint0_linear_2485_68810"
              x1="-1.17066"
              y1="28.72"
              x2="229.751"
              y2="28.72"
              gradientUnits="userSpaceOnUse"
            >
              <stop stop-color="#EBFEFB" />
              <stop offset="1" stop-color="#29419B" />
            </linearGradient>
          </defs>
        </svg>
      </span>
    </div>
    <div class="mt-5 space-y-2 text-center">
      <h4 class="font-semibold text-gray-300">
        {{ cardData.id }}. {{ $t(cardData.title) }}
      </h4>
      <p class="text-sm text-gray-200">{{ $t(cardData.subTitle) }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cardData: {},
    last: Boolean,
  },
};
</script>

<style>
.guideCard {
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.1);
}
</style>
