<template>
    <div class="rounded-2xl border border-default p-6" :class="bg">
        <div class="flex items-start justify-between mb-3">
            <div class="w-10 h-10 rounded-xl flex items-center justify-center" :class="bg.replace('/30', '/50')">
                <UIcon :name="icon" :class="[color, 'text-xl']" />
            </div>
            <span class="text-xs font-bold px-2 py-1 rounded-full"
                :class="badge === 'Premium' ? 'bg-primary-900/60 text-primary-300' : 'bg-green-900/60 text-green-300'">
                {{ badge }}
            </span>
        </div>
        <h3 class="font-bold text-highlighted mb-2">{{ title }}</h3>
        <p class="text-sm text-muted leading-relaxed">{{ desc }}</p>
    </div>
</template>

<script setup lang="ts">
defineProps<{
    icon: string;
    color: string;
    bg: string;
    badge: string;
    title: string;
    desc: string;
}>();
</script>
