<template>
  <div class="bg-negative text-white row items-center">
    <q-icon name="la la-exclamation-circle q-ma-md" size="50px" />

    <div class="col-grow q-my-md text-body2">
      <p v-if="title" class="text-bold q-my-none">{{ title }}</p>

      <ul v-if="items" class="q-my-none q-pl-md">
        <li v-for="(item, key) in items" :key="key">{{ item }}</li>
      </ul>
    </div>

    <ui-btn-close class="self-start q-ma-md" @click="close" />
  </div>
</template>

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

@Component({
  inheritAttrs: false,
  components: { UiBtnClose, QIcon },
})
export default class UiFlash extends Vue {
  @Prop()
  title?: string

  @Prop()
  items?: string[]

  @Emit() close() {}
}
</script>
