<template>
  <v-card class="rounded-lg" elevation="2" v-bind="$attrs">
    <v-card-title class="text-subtitle-1 font-weight-bold py-4 border-b">
      {{ title }}
    </v-card-title>
    <v-card-text class="d-flex flex-column align-center justify-center pt-6 pb-6">
      <div
        class="d-flex align-center justify-center"
        style="position: relative; width: 180px; height: 180px"
      >
        <v-progress-circular
          bg-color="grey-lighten-3"
          color="primary"
          :model-value="value"
          :size="160"
          :width="20"
        >
          <div class="text-center">
            <div class="text-h6 font-weight-bold">{{ value }}%</div>
            <div class="text-caption text-grey">{{ subtitle }}</div>
          </div>
        </v-progress-circular>
      </div>
      <div class="mt-4 d-flex justify-center gap-4 w-100">
        <div class="d-flex align-center mr-4">
          <v-icon class="mr-1" color="primary" size="small" :icon="mdiCircle" />
          <span class="text-caption">{{ primaryLabel }}</span>
        </div>
        <div class="d-flex align-center">
          <v-icon class="mr-1" color="grey-lighten-3" size="small" :icon="mdiCircle" />
          <span class="text-caption">{{ secondaryLabel }}</span>
        </div>
      </div>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
import { mdiCircle } from '@mdi/js'
interface Props {
  title: string
  value: number
  subtitle?: string
  primaryLabel?: string
  secondaryLabel?: string
}

withDefaults(defineProps<Props>(), {
  subtitle: '來源佔比',
  primaryLabel: '校內',
  secondaryLabel: '校外',
})
</script>
