Untitled

<script setup lang="ts">
import PillarHorizontal from '@/core_components/graph/PillarHorizontal.vue'

const greenTransition = [
  { label: 'Italy', value: 48.2 },
  { label: 'Spain', value: 45.5 },
  { label: 'France', value: 39.8 },
  { label: 'Poland', value: 34.2 },
  { label: 'Germany', value: 31.1 },
]
</script>

<template>
  <section class="flex flex-col gap-6 p-4">
    <h2 class="text-xl font-semibold text-foreground">Graphs</h2>
    <div class="flex flex-col gap-2">
      <h3 class="text-sm font-medium text-muted-foreground uppercase">Horizontal Pillar Graph</h3>
      <div class="flex flex-wrap items-center gap-4">
        <PillarHorizontal
          title="Top 5 Countries - Green Transition"
          :data="greenTransition"
          variant="green"
          :averageValue="35"
        />
      </div>
    </div>
  </section>
</template>