<template>
  <div style="cursor: default">
    <div class="legend-item" v-for="item in props.data" :key="item.id">
      <div class="icon" :style="{ backgroundColor: item.color }"></div>
      <span class="name">{{ item.name }}</span>
      <span class="value" :style="{ color: item.color }">{{ item.value }}</span>
      <span class="unit">人</span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import type { PieChartData } from '../types';

  const props = defineProps<{
    data: PieChartData[];
  }>();
</script>

<style scoped>
  .legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    margin-right: 10px;
  }
  .name {
    color: #6e6f6e;
    margin-right: 5px;
  }
  .value {
    font-weight: bold;
  }
  .unit {
    color: #b5b5b5;
    font-size: 12px;
  }
</style>
