<template>
  <q-card class="w-info-card" flat bordered>
    <slot name="items">
      <w-info-card-item v-for="(detail, detailIndex) in details" :key="detailIndex" class="details" :label="detail.label">
        <div class="row q-mt-xs q-gutter-sm">
          <q-icon class="icon" :name="detail.icon" />
          <div class="text-caption">
            {{ detail.text }}
          </div>
        </div>
      </w-info-card-item>
    </slot>
    <slot name="actions" />
  </q-card>
</template>

<script>
import { QCard } from "quasar";

export default {
  name: "WInfoCard",
  mixins: [QCard],
  inheritAttrs: true,
  props: {
    details: {
      type: Array,
      default: () => [],
    },
  },
};
</script>
