<template>
  <div class="metrics-panel">
    <MetricsChart
      :metrics="store.metrics"
      :trends="store.trends"
      :period="store.period"
      @period-change="onPeriodChange"
    />
  </div>
</template>

<script setup lang="ts">
import { useEvolutionStore } from '@/stores/evolution'
import MetricsChart from '@/components/evolution/MetricsChart.vue'

const store = useEvolutionStore()

function onPeriodChange(period: string) {
  store.loadMetrics(period)
}
</script>

<style scoped>
.metrics-panel {
  height: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-color-split);
  border-radius: 8px;
  padding: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
</style>
