<script lang="ts" setup>
import { router } from '@inertiajs/vue3'

interface Props {
  title: string
  stats: string | number
  icon: string
  color?: string
  subtitle?: string
  subtitleColor?: string
  href?: string
  badge?: string
  badgeColor?: string
}

const props = withDefaults(defineProps<Props>(), {
  color: 'primary',
  subtitle: undefined,
  subtitleColor: undefined,
  href: undefined,
  badge: undefined,
  badgeColor: 'info',
})

function handleClick(): void {
  if (props.href) {
    router.visit(props.href)
  }
}
</script>

<template>
  <VCard
    :class="{ 'cursor-pointer stat-card--clickable': href }"
    v-bind="href ? { onClick: handleClick } : {}"
  >
    <VCardText class="d-flex align-center gap-4">
      <VAvatar :color="color" variant="tonal" rounded size="44">
        <VIcon :icon="icon" size="26" />
      </VAvatar>
      <div class="flex-grow-1">
        <div class="d-flex align-center gap-2">
          <div class="text-body-2 text-medium-emphasis">{{ title }}</div>
          <VChip
            v-if="badge"
            :color="badgeColor"
            size="x-small"
            variant="tonal"
          >
            {{ badge }}
          </VChip>
        </div>
        <div class="text-h5 font-weight-semibold">{{ stats }}</div>
        <div
          v-if="subtitle"
          class="text-caption"
          :class="subtitleColor ? `text-${subtitleColor}` : 'text-medium-emphasis'"
        >
          {{ subtitle }}
        </div>
      </div>
    </VCardText>
  </VCard>
</template>

<style scoped>
.stat-card--clickable {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.stat-card--clickable:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}
</style>
