<template>
  <div class="experience-panel">
    <ExperienceTimeline
      :experiences="store.experiences"
      @filter="onExperienceFilter"
    />
  </div>
</template>

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

const store = useEvolutionStore()

function onExperienceFilter(outcome: string) {
  store.loadExperiences(outcome || undefined)
}
</script>

<style scoped>
.experience-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>
