<template>
  <div class="placeholder-wrapper">
    <ion-icon class="placeholder-icon" :name="icon" :style="'color:'+color"></ion-icon>
    <h1 :style="'color:'+color">{{ text }}</h1>
  </div>
</template>

<script lang="ts">
export default {
  props: {
    icon: {
        type: String,
        default: 'flash'
    },
    color: {
        type: String,
        default: '#7f8c8d'
    },
    text: {
        type: String,
        default: 'This section is currently empty.'
    }
  },
}
</script>

<style scoped lang="css">
.placeholder-wrapper {
    padding:30px;
    text-align:center;
}
.placeholder-icon {
    font-size:120px;
    opacity: .5;
}
.placeholder-wrapper h1 {
    opacity: .5;
}
</style>