<template>
  <div class="chart-summary">
    <svg class="summary-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="10" cy="10" r="9" stroke="#055FC2" stroke-width="2" fill="none"/>
      <path d="M7 10L9 12L13 8" stroke="#055FC2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <p class="summary-text">{{ text }}</p>
    <svg class="arrow-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
      @click="$emit('more')">
      <path d="M9 18L15 12L9 6" stroke="#055FC2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </div>
</template>

<script setup>
defineProps({
  text: {
    type: String,
    required: true
  }
})

defineEmits(['more'])
</script>

<style lang="scss" scoped>
.chart-summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 16px 16px;
  background: #F6FAFF;
  border: 1px solid #E7F3FF;
  border-radius: 4px;

  .summary-icon {
    flex-shrink: 0;
    margin-top: 2px;
  }

  .summary-text {
    flex: 1;
    font-size: 16px;
    line-height: 24px;
    color: #055FC2;
    margin: 0;
  }

  .arrow-icon {
    flex-shrink: 0;
    cursor: pointer;
    transition: opacity 0.2s;

    &:hover {
      opacity: 0.7;
    }
  }
}
</style>
