<template>
  <div class=" flex bg-secondaryPurple pt-8 pb-7 rounded-3xl">
    <img :src="getSvg(props.icon)" class=" ml-9 mr-7 md:w-11 md:h-11">
    <div>
      <div class=" text-sm text-gray-800"> {{ props.title }}</div>
      <div :class="!props.small ? 'text-xl font-semibold' : 'pt-1 text-sm font-semibold'">
        {{ props.detail }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from '@vue/reactivity';

const props = withDefaults(defineProps<{
  icon: string,
  title: string,
  detail: string,
  small?: boolean
}>(), {
  small: false
})


const getSvg = computed(() => {
  return (svg: string) => {
    return new URL(`../assets/${svg}.svg`, import.meta.url).href
  }
})
</script>