<script setup lang="ts">
import { computed } from 'vue';
import { VChart, type EChartsOption } from './echarts-setup';

const props = withDefaults(
  defineProps<{
    title?: string;
    option: EChartsOption;
    height?: string;
  }>(),
  { title: '', height: '300px' },
);

const style = computed(() => ({ height: props.height, width: '100%' }));
</script>

<template>
  <div class="chart-panel">
    <div v-if="title" class="chart-title">{{ title }}</div>
    <VChart class="chart-canvas" :option="option" :style="style" autoresize />
  </div>
</template>

<style scoped>
.chart-panel {
  padding: 16px 18px 12px;
  border-radius: 12px;
  border: 1px solid #1e1e1e;
  background: rgba(255, 255, 255, 0.02);
  height: 100%;
  box-sizing: border-box;
}
.chart-title {
  font-size: 13px;
  font-weight: 700;
  color: #ccc;
  margin-bottom: 4px;
}
.chart-canvas {
  min-height: 200px;
}
</style>
