<script setup lang="ts">
import { computed } from 'vue'

export interface Props {
  itemType: string
  standardTotal: number
  minimumTotal: number
  maximumTotal: number
  averageTotal: number
}

const props = defineProps<Props>()

const minIncrease = computed(() => props.standardTotal + props.minimumTotal)
const maxIncrease = computed(() => props.standardTotal + props.maximumTotal)
const aveIncrease = computed(() => props.standardTotal + props.averageTotal)
</script>

<template>
  <v-card>
    <v-card-title>Overall {{ itemType }} Power Increase</v-card-title>
    <v-card-item>
      <v-list density="compact">
        <v-list-item>
          <v-list-item-title>Minimum: {{ minIncrease }}</v-list-item-title>
        </v-list-item>
        <v-list-item>
          <v-list-item-title>Maximum: {{ maxIncrease }}</v-list-item-title>
        </v-list-item>
        <v-list-item>
          <v-list-item-title>Mean: {{ aveIncrease }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-card-item>
  </v-card>
</template>
