<template>
  <div class="bg-white cursor-default shadow-sm text-center h-56 p-8 hover:shadow-2xl transition-shadow">
    <svg-icon :iconClass="props.data.icon" class="w-14 h-14 mx-auto" />
    <div class="pt-4" :class="myStyle.secondHeader">{{ props.data.title }}</div>
    <div class="text-sm text-gray-400 pt-4 text-center">{{ props.data.detail }}</div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults, defineProps } from "vue"
import myStyle from "@/assets/style/style.module.css"
interface item {
  id: number,
  title: string,
  detail: string,
  icon: string
}
const props = withDefaults(defineProps<{
  data: item
}>(), {

})
</script>