<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>
export default {
  name: 'KoleDashboardCard',
  props: {
    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>
