<template>
  <div class="flex" :class="style">
    <div class="w-1/2" >
      <img data-aos="zoom-in" data-aos-duration='1000' data-aos-easing='ease-in-out-cubic' data-aos-delay='100' :src="getImgUrl(props.data.url)" class="w-full"  />
    </div>
    <div class="w-1/3 px-24 flex flex-col self-center">
      <svg-icon :iconClass="props.data.icon" class="w-8 h-7" />
      <div class="text-lg font-semibold text-gray-800 pt-1">{{ props.data.title }}</div>
      <div class="text-sm text-gray-400 pt-2 text-justify">{{ props.data.detail }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults, defineProps, computed } from "vue"
interface item {
  id: number,
  title: string,
  detail: string,
  icon: string,
  url: string
}
const props = withDefaults(defineProps<{
  data: item
}>(), {

})

const getImgUrl = computed(() => {
  return (url: string) => {
    return require(`@/assets/${url}.png`)
  }
})

const style = computed(() => {
  return props.data.id % 2 == 0 ? ' flex-row-reverse' : 'flex-row'
})
</script>