<template>
  <div class="mx-report-summary-container">
    <paper-type-card
      v-for="(item, idx) in data"
      :key="idx + item.label"
      :name="item.label"
      :columns="item.tableData.columns"
      :rows="item.tableData.rows"
      :type="idx % 2 == 0 ? 'type' : 'difficult'"
      :class="{ 'mx-report-summary-item': true, mr10: idx < data.length - 1 }"
      :noPadding="true"
      :nameHighlight="true"
      :border="false"
    ></paper-type-card>
  </div>
</template>
<script>
import PaperTypeCard from "../../evaluating/components/paperTypeCard.vue";
import reportTeacherSummaryCard from "./reportTeacherSummaryCard.vue";
export default {
  components: { reportTeacherSummaryCard, PaperTypeCard },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
};
</script>
<style scoped>
.mx-report-summary-container {
  display: flex;
  justify-content: space-between;
}
.mx-report-summary-item {
  flex: 1;
}
</style>