<template>
  <b-modal id="message-modal" size="md" :no-close-on-backdrop="true">
    <template v-slot:modal-header="{  }">
      <b-container>
        <b-row class="d-flex justify-content-between mb-2 mt-1">
          <b-col class="d-flex modal-text-color ml-2" cols="8">
            <div class="d-flex align-self-center justify-content-center rounded-div mr-2 mt-1">
              <font-awesome-icon icon="exclamation-circle" class="align-self-center" />
            </div>
            <div class="pt-1">
              <div class="akkurat-bold max-header-text">{{ title }}</div>
            </div>
          </b-col>
          <b-col class="d-flex justify-content-end mr-2 mt-1">
            <span class="close-icon" @click="closeModal">
              <font-awesome-icon icon="times" class="align-self-center" />
            </span>
          </b-col>
        </b-row>
      </b-container>
    </template>
    <b-container>
      <b-row>
        <b-col class="mx-2 d-flex text-center" v-html="message">
          
       

        </b-col>
      </b-row>
    </b-container>
    <template v-slot:modal-footer="{  }">
      <b-container>
      <b-row>
        <b-col class="d-flex justify-content-center my-3 px-3">
          <b-button
            class="mr-2 btn shadow-none border-0 btn-default"
            @click="closeModal"
          >
            Ok
          </b-button>
        </b-col>
      </b-row>
      </b-container>
    </template> 
  </b-modal>
</template>

<script>

export default {
  name: 'message-modal',
  props:{
    message: {
      type: String
    },
    title:{
      type: String,
      default: 'Erro'
    }
  },
  data: () => ({
    file: null,
  }),
  methods: {
    closeModal() {
      this.$emit('close');
      this.$bvModal.hide('message-modal');
    },
  },
};
</script>

<style scoped lang="scss">
@import '../../assets/css/main.scss';

.modal-text-color {
  color: #3E3E3E;
}

.min-header-text {
  letter-spacing: 0.2px;
  font-size: 9px;
}

.max-header-text {
  letter-spacing: 0.4px;
  font-size: 16px;
}


.close-icon {
  color: #979797;
  font-size: 20px;
}

.btn-default {
  border-radius: 20px;
  width: 100%;
  max-width: 192px;
  height: 35px;
  background: #278937;
}

.btn-red {
  background: #CB2D2D;
}

</style>
