<template>
  <v-card
    elevation="10"
    hover
  >
    <v-card-item>
      <div class="d-flex align-center">
        <v-avatar
          :color="color"
          size="56"
          class="mr-4"
        >
          <slot name="icon"></slot>
        </v-avatar>
        <div>
          <v-card-title class="text-h5">{{ title }}</v-card-title>
          <v-card-subtitle>{{ subtitle }}</v-card-subtitle>
        </div>
      </div>
    </v-card-item>

    <v-divider />

    <v-card-text>
      <div class="d-flex align-center justify-space-between">
        <span class="text-h3 font-weight-bold">{{ count ?? "&nbsp;" }}</span>
        <v-icon
          size="large"
          :color="color"
        >
          mdi-chevron-right
        </v-icon>
      </div>
      <div class="text-caption text-medium-emphasis mt-1">{{ countLabel }}</div>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    title: string
    subtitle?: string
    count?: number | null
    countLabel?: string
    color?: string
  }>(),
  {
    subtitle: "",
    count: null,
    countLabel: "",
    color: "primary",
  }
)
</script>
