<!-- src/components/LYcom/InfoCard/index.vue -->
<template>
  <div class="info-card">
    <div class="info-card-icon">
      <slot name="icon">
        <i :class="iconClass" v-if="iconClass"></i>
        <svg v-else-if="iconSvg" v-html="iconSvg" class="icon-svg"></svg>
      </slot>
    </div>
    <div class="info-card-content">
      <div class="content-title">{{ title }}</div>
      <div class="content-value">{{ value }}</div>
      <div class="content-desc">{{ description }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
interface Props {
  iconClass?: string
  iconSvg?: string
  title?: string
  value?: string | number
  description?: string
}

withDefaults(defineProps<Props>(), {
  title: '',
  value: '',
  description: ''
})
</script>

<style scoped>
.info-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #ffffff;
  border-radius: 8px;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
}

.info-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background-color: #f0f2f5;
  margin-right: 16px;
  flex-shrink: 0;
}

.info-card-icon i {
  font-size: 24px;
  color: #409eff;
}

.info-card-icon .icon-svg {
  width: 24px;
  height: 24px;
}

.info-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 4px;
}

.content-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.content-desc {
  font-size: 12px;
  color: #c0c4cc;
}
</style>