<template>
  <div class="kole-dashcard">
    <div class="kole-dashcard-head">
      <span class="kole-dashcard-title">{{ title }}</span>
      <span class="kole-dashcard-icon">{{ icon }}</span>
    </div>
    <div class="kole-dashcard-value">{{ value }}</div>
    <div class="kole-dashcard-trend" :class="trend">{{ trendText }}</div>
  </div>
</template>

<script setup>
defineProps({
  title: { type: String, default: '' },
  value: { type: [String, Number], default: '' },
  icon: { type: String, default: '📊' },
  trend: { type: String, default: 'up' },
  trendText: { type: String, default: '' }
});
</script>

<style src="./DashboardCard.css"></style>
