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

<script>
export default {
  name: 'AaDashboardCard',
  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>
