<template>
  <v-sheet class="mobile-favorites-panel d-flex flex-column" color="surface">
    <v-list class="px-2 py-2 flex-grow-1 overflow-auto" density="comfortable">
      <v-list-item
        v-for="item in favoriteItems"
        :key="item.path ?? item.title"
        class="mb-1"
        rounded="lg"
        @click="emit('select', item)"
      >
        <v-list-item-title class="text-body-2">{{ item.title }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-sheet>
</template>

<script setup lang="ts">
import type { AdminLayoutMenuItem } from './types'

withDefaults(
  defineProps<{
    favoriteItems?: AdminLayoutMenuItem[]
  }>(),
  {
    favoriteItems: () => [],
  }
)

const emit = defineEmits<{
  select: [item: AdminLayoutMenuItem]
}>()
</script>

<style scoped>
.mobile-favorites-panel {
  min-height: 0;
  height: 100%;
}
</style>
