<template>
  <div class="widget-page-state">
    <q-icon :name="icon" color="blue-grey" size="128px" />
    <div class="text-h2 text-blue-grey widget-page-state__text">
      {{ title }}
    </div>
    <ui-btn
      v-if="hasBtn"
      @click="submit"
      unelevated
      size="lg"
      class="q-mt-md"
      :color="submitColor"
      :label="submitLabel"
    />
  </div>
</template>

<style scoped lang="sass">
.widget-page-state
  padding-top: 274px
  text-align: center
  display: flex
  flex-direction: column
  width: 100%
  align-items: center

  &__text
    margin-top: 16px
    max-width: 350px
</style>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import UiBtn from '@/lib-components/buttons/UiBtn.vue'
import { QIcon } from 'quasar'

@Component({
  components: { UiBtn, QIcon },
})
export default class WidgetPageState extends Vue {
  @Prop({ type: String, required: true })
  icon!: string

  @Prop({ type: String, required: true })
  title!: string

  @Prop(Boolean)
  hasBtn!: boolean

  @Prop(String)
  submitLabel!: string

  @Prop({ type: String, default: 'blue-grey' })
  submitColor!: string

  @Emit()
  submit() {
    return true
  }
}
</script>
