<script setup lang="ts">
import { inject } from 'vue'
import { ChartConfigSymbol } from '.'

const props = defineProps<{
  nameKey?: string
}>()

const config = inject(ChartConfigSymbol)
</script>

<template>
  <div class="flex items-center justify-center gap-4">
    <template v-for="(item, key) in config" :key="key">
      <div class="flex items-center gap-1.5">
        <span
          class="size-2.5 rounded-full"
          :style="{ backgroundColor: item.color ?? item.theme?.light }"
        />
        <span class="text-muted-foreground">
          {{ item.label ?? key }}
        </span>
      </div>
    </template>
  </div>
</template>
