<script setup lang="ts">
import Card from "../ui/Card.vue";
import CardContent from "../ui/CardContent.vue";

defineProps<{
  data: {
    label?: string;
    value?: string | number;
    description?: string;
    trend?: "up" | "down" | "neutral";
    change?: string;
    icon?: string;
  };
  cols: number;
}>();
</script>

<template>
  <Card class="h-full">
    <CardContent class="p-6">
      <div class="flex items-start justify-between gap-4">
        <div class="min-w-0 flex-1">
          <p class="truncate text-sm font-medium text-muted-foreground">
            {{ data.label ?? "Stat" }}
          </p>
          <p class="mt-1 text-2xl font-bold tabular-nums text-foreground">
            {{ data.value ?? "—" }}
          </p>
          <p
            v-if="data.description"
            class="mt-1 truncate text-xs text-muted-foreground"
          >
            {{ data.description }}
          </p>
          <div v-if="data.change" class="mt-2 flex items-center gap-1 text-xs">
            <!-- Trend up -->
            <svg
              v-if="data.trend === 'up'"
              class="h-3.5 w-3.5 text-green-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2.5"
                d="M5 15l7-7 7 7"
              />
            </svg>
            <!-- Trend down -->
            <svg
              v-else-if="data.trend === 'down'"
              class="h-3.5 w-3.5 text-red-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2.5"
                d="M19 9l-7 7-7-7"
              />
            </svg>
            <span
              :class="{
                'text-green-600': data.trend === 'up',
                'text-red-600': data.trend === 'down',
                'text-muted-foreground':
                  !data.trend || data.trend === 'neutral',
              }"
            >
              {{ data.change }}
            </span>
          </div>
        </div>

        <!-- Icon slot (optional) -->
        <div v-if="data.icon" class="flex-shrink-0">
          <div
            class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary"
          >
            <span class="text-lg">{{ data.icon }}</span>
          </div>
        </div>
      </div>
    </CardContent>
  </Card>
</template>
