<script setup lang="ts">
import type { Component } from 'vue'

defineProps<{
  icon: Component
  iconColor: string
  iconBg: string
  title: string
  description: string
}>()
</script>

<template>
  <!-- Design: cornerRadius 14, padding [32, 28], gap 14 -->
  <div class="flex flex-col gap-3.5 bg-[#F8FAFC] border border-[#E2E8F0] rounded-2xl px-7 pt-8 pb-8 h-full">
    <!-- Icon box: 44×44, cornerRadius 10 -->
    <div
      class="w-11 h-11 rounded-[10px] flex items-center justify-center shrink-0"
      :style="{ backgroundColor: iconBg }"
    >
      <component :is="icon" :size="22" :stroke-width="1.75" :style="{ color: iconColor }" />
    </div>
    <!-- Title: 16px semibold -->
    <h3 class="text-[#0F172A] font-semibold text-base leading-snug">{{ title }}</h3>
    <!-- Description: 13px, lineHeight 1.65 -->
    <p class="text-[#64748B] text-[13px] leading-[1.65]">{{ description }}</p>
  </div>
</template>
