<template>
  <div class="card email-grid-wrapper" @click="$emit('selectedId', data.sid)">
    <div class="card-body">
      <div class="email-grid d-flex align-items-end">
        <img class="email-grid-bg" :src="data.image" alt="" />

        <div class="px-4 py-3 email-grid-content">
          <ul class="list-inline mb-0">
            <li class="list-inline-item me-3">
              {{ data.title }}
            </li>
            <li class="list-inline-item me-3">
              <span
                class="badge"
                :class="{
                  'bg-success': data.isActive === true,
                  'bg-danger': data.isActive === false,
                }"
                >{{ data.isActive ? 'Active' : 'Pending' }}</span
              >
            </li>
            <li
              b-tooltip.hover.top
              class="list-inline-item me-3"
              title="Created Date"
            >
              <i class="me-1"> <Icon icon="bx:calendar"/></i>
              {{ formattedDate }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
import { BTooltip } from 'bootstrap-vue-next';
import { Icon } from '@iconify/vue';

export default {
  props: {
    data: {
      required: true,
      type: Object,
    },
  },
  computed: {
    formattedDate() {
      return moment(new Date(this.data.dateCreated)).format('L');
    },
  },
  components: {
    BTooltip,
    Icon
  },
  directives: { 'b-tooltip':BTooltip },

};
</script>