<script setup lang="ts">
import type { AnalysisOverviewItem } from '../typing';

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  VbenCountToAnimator,
  VbenIcon,
} from '@vben-core/shadcn-ui';

interface Props {
  items: AnalysisOverviewItem[];
}

defineOptions({
  name: 'AnalysisOverview',
});

withDefaults(defineProps<Props>(), {
  items: () => [],
});
</script>

<template>
  <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
    <Card v-for="(item, index) in items" :key="index" class="relative overflow-hidden">
      <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle class="text-sm font-medium">
          {{ item.title }} 
        </CardTitle>
        <VbenIcon :icon="item.icon" class="h-4 w-4 text-muted-foreground" />
      </CardHeader>
      <CardContent>
        <div class="text-2xl font-bold">
          <VbenCountToAnimator :end-val="item.value" /> 
        </div>
        <p class="text-xs text-muted-foreground">
          {{ item.todaytitle }}
          <span class="font-medium text-foreground">
            +<VbenCountToAnimator :end-val="item.todayValue" />
          </span>
        </p>
        <div class="mt-3 border-t pt-3">
          <p class="text-xs text-muted-foreground flex justify-between">
            <span>{{ item.Subtitle }}</span>
            <span class="font-medium text-foreground">
              <VbenCountToAnimator :end-val="item.SubValue" />
            </span>
          </p>
          <p class="text-xs text-muted-foreground flex justify-between mt-1">
          <span>{{ item.todaySubtitle }}</span>
          <span class="font-medium text-foreground">
            +<VbenCountToAnimator :end-val="item.todaySubValue" />
          </span>
        </p>
        <p v-if="item.extraTitle" class="text-xs text-muted-foreground flex justify-between mt-1">
          <span>{{ item.extraTitle }}</span>
          <span class="font-medium text-foreground">
            <VbenCountToAnimator :end-val="item.extraValue || 0" />
          </span>
        </p>
        <p v-if="item.extra2Title" class="text-xs text-muted-foreground flex justify-between mt-1">
          <span>{{ item.extra2Title }}</span>
          <span class="font-medium text-foreground">
            +<VbenCountToAnimator :end-val="item.extra2Value || 0" />
          </span>
        </p>
        </div>
      </CardContent>
    </Card>
  </div>
</template>
