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

defineProps<{
  data: {
    value?: string | number;
    label?: string;
    icon?: string | null;
  };
  widget: {
    key: string;
    label: string;
    width: string;
    hideable: boolean;
  };
}>();
</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 ?? widget.label }}
          </p>
          <p class="mt-1 text-3xl font-bold tabular-nums text-foreground">
            {{ data.value ?? "—" }}
          </p>
        </div>
        <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>
