<template>
  <v-card class="rounded-lg" elevation="2" v-bind="$attrs">
    <v-card-title class="text-subtitle-1 font-weight-bold py-4 border-b">
      {{ title }}
    </v-card-title>
    <v-card-text class="pa-4">
      <v-row density="compact">
        <v-col v-for="(nav, i) in navs" :key="i" class="text-center mb-2" cols="4">
          <v-btn
            class="mb-1"
            :color="nav.color"
            icon
            variant="text"
            @click="$emit('nav-click', nav)"
          >
            <v-icon size="24" :icon="nav.icon" />
          </v-btn>
          <div class="text-caption text-grey-darken-1">{{ nav.title }}</div>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
interface Props {
  title: string
  navs: Array<{
    icon: string
    title: string
    color: string
  }>
}

defineProps<Props>()

defineEmits(['nav-click'])
</script>
