<template>
  <div class="donut-chart-container">
    <div class="chart-wrapper">
      <Doughnut
        :data="chartData"
        :options="chartOptions"
        :plugins="[centerTextPlugin]"
      />
      <div class="center-text">
        <div class="center-number text-text">{{ totalUsers }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { Doughnut } from "vue-chartjs";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";

ChartJS.register(ArcElement, Tooltip, Legend);

const props = defineProps({
  totalUsers: {
    type: Number,
    default: 1,
  },
  color: {
    type: String,
    default: "#08514C",
  },
});

const chartData = computed(() => ({
  datasets: [
    {
      data: [props.totalUsers],
      backgroundColor: [props.color],
      borderWidth: 0,
      cutout: "70%",
    },
  ],
}));

const chartOptions = {
  responsive: true,
  maintainAspectRatio: true,
  plugins: {
    legend: {
      display: false,
    },
    tooltip: {
      enabled: false,
    },
  },
};

const centerTextPlugin = {
  id: "centerText",
  beforeDraw: () => {},
};
</script>

<style scoped>
.donut-chart-container {
  position: relative;
  width: 150px;
  height: 150px;
}

.chart-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.center-number {
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
}
</style>
