<template>
  <div class="flex flex-row py-12">
    <div class="w-2/5">
      <img :src="getImgUrl(props.data.icon)" />
    </div>
    <div class="w-3/5 flex flex-col justify-evenly h-96 pl-5">
      <div class="text-xl text-gray-800 font-medium">{{ props.data.title }}</div>
      <div class="text-sm text-gray-400">{{ props.data.detail }}</div>
      <slot name="dataProve" />
      <div class="flex flex-row">
        <MainButton text="查看更多" size="large" />
        <div class="pr-5"></div>
        <MainButton text="立即体验" size="large" theme="dark" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, defineProps, withDefaults } from "vue"
import MainButton from "./mainButton.vue"
interface item {
  id: number,
  icon: string,
  title: string,
  detail: string
}

const props = withDefaults(defineProps<{
  data: item
}>(), {

})

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