<template>
  <div class="flex bg-mainRed pt-8 pb-7 rounded-3xl pr-4">
    <img :src="getSvg(props.icon)" class="ml-9 mr-7 md:w-11 md:h-11" />
    <div class="text-gray-50">
      <div class="text-sm">{{ props.title }}</div>
      <div
        :class="
          !props.small
            ? 'text-base 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>
