<template>
  <div class="history-timeline-wrapper">
    <div class="timeline-list">
      <div v-for="(event, index) in events" :key="index" class="timeline-item">
        <!-- 左侧：实心三角箭头 + 年份，上下布局 -->
        <div class="item-label">
          <!-- 实心右三角 SVG，与设计图一致 -->
          <svg class="arrow-icon" width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0L12 7L0 14V0Z" fill="#F97316"/>
          </svg>
          <span class="year-text">{{ event.year }}</span>
        </div>
        <!-- 右侧：标题 + 描述，上下布局 -->
        <div class="item-content">
          <div class="item-title">{{ event.title }}</div>
          <div class="item-desc" v-if="event.description">{{ event.description }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  events: {
    type: Array,
    default: () => [],
    // 每项结构：{ year: string, title: string, description?: string }
  }
})
</script>

<style lang="scss" scoped>
.history-timeline-wrapper {
  width: 100%;
  padding: 16px 24px;

  .timeline-list {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .timeline-item {
      display: flex;
      flex-direction: column;
      gap: 8px;

      // 第一行：实心三角 + 年份横排
      .item-label {
        display: flex;
        align-items: center;
        gap: 8px;

        .arrow-icon {
          flex-shrink: 0;
          margin-top: 1px;
        }

        .year-text {
          font-size: 18px;
          font-weight: 700;
          font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
          color: rgb(5, 95, 194);
          line-height: 24px;
        }
      }

      // 第二行起：标题 + 描述，左侧缩进与年份对齐
      .item-content {
        padding-left: 20px; // 12px箭头 + 8px gap

        .item-title {
          font-size: 16px;
          font-weight: 700;
          font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
          color: rgb(59, 65, 75);
          line-height: 24px;
        }

        .item-desc {
          font-size: 14px;
          font-weight: 400;
          font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif;
          color: rgb(95, 101, 108);
          line-height: 22px;
          margin-top: 6px;
        }
      }
    }
  }
}
</style>
