<template>
  <v-hover v-slot:default="{ hover }">
    <v-card flat :elevation="hover ? 8 : 0" @click.prevent="$router.push(route)" color="primary">
      <v-card-text class="d-flex justify-space-between">
        <div class="d-flex">
          <v-avatar
            size="60"
            :color="hover ? 'accent' : 'deep-orange lighten-5'"
          >
            <v-icon :color="hover ? 'white' : 'accent'">{{ icon }}</v-icon>
          </v-avatar>

          <div v-if="count" class="mx-6 txt--text">
            <v-card-title class="font-weight-bold my-0 pa-0">
              {{ count }}
            </v-card-title>

            <v-card-subtitle v-if="count" class="my-0 pa-0">
              {{ label }}
            </v-card-subtitle>
          </div>

          <div v-else class="mx-6 txt--text d-flex align-center">
            <v-card-title class="my-0 pa-0 text-subtitle-1">
              {{ label }}
            </v-card-title>
          </div>
        </div>

        <slot></slot>
      </v-card-text>
    </v-card>
  </v-hover>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0,
    },
    label: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
    route: {
      type: String,
      default: '',
    },
  },
}
</script>
