<template>
  <v-card
    class="rounded-xl elevation-2 d-flex align-center justify-between pa-4 my-4"
    color="surface"
    :to="to"
  >
    <div class="d-flex align-center">
      <v-avatar class="mr-3 text-white elevation-1" :color="iconColor" size="48">
        <v-icon :icon="icon" />
      </v-avatar>

      <div>
        <div class="font-weight-bold text-subtitle-2 text-grey-darken-4">{{ title }}</div>

        <div class="text-caption text-grey">{{ description }}</div>
      </div>
    </div>

    <v-icon color="primary" icon="mdi-chevron-right" />
  </v-card>
</template>

<script setup lang="ts">
defineProps<{
  to: string
  icon: string
  iconColor: string
  title: string
  description: string
}>()
</script>
