<template>
  <div class="pitfall-route-panel">
    <PitfallPanel
      :warnings="store.pitfalls"
      :loading="store.isLoading"
      @check="onPitfallCheck"
    />
  </div>
</template>

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

const store = useEvolutionStore()

function onPitfallCheck(taskType: string) {
  store.checkPitfalls(taskType, [])
}
</script>

<style scoped>
.pitfall-route-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>
