<script setup lang="ts">
const emit = defineEmits<{
  compose: []
}>()

const handleCompose = () => {
  emit('compose')
}
</script>

<template>
  <div class="empty-state">
    <v-icon size="96" color="grey-lighten-1">mdi-email-open-outline</v-icon>
    <div class="text-h5 mt-6 text-medium-emphasis">No message selected</div>
    <div class="text-body-1 mt-2 text-medium-emphasis">
      Select a message to read or compose a new one
    </div>
    <v-btn
      color="primary"
      size="large"
      class="mt-6"
      prepend-icon="mdi-pencil"
      @click="handleCompose"
    >
      Compose New Message
    </v-btn>
  </div>
</template>

<style scoped lang="scss">
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
}
</style>
