"use client";

import { Card, Space, Timeline, Typography } from "antd";
import { TrophyOutlined } from "@ant-design/icons";
import { timelineHonors, type HonorLevel } from "@/data/honors";

const { Title } = Typography;

const levelColor: Record<HonorLevel, string> = {
  attackDefense: "#52c41a",
  ctf: "#1677ff",
  vulnerability: "#13c2c2",
  campus: "#faad14"
};

export function Honors() {
  const timelineItems = timelineHonors.map((honor) => ({
    color: levelColor[honor.level],
    children: (
      <div className="timeline-item">
        <span className="timeline-year">{honor.year}</span>
        <strong>{honor.event}</strong>
        <p>{honor.award}</p>
      </div>
    )
  }));

  return (
    <section id="honors" className="section honors-section">
      <div className="section-inner">
        <div className="section-heading">
          <Space className="section-kicker" size={8}>
            <TrophyOutlined />
            荣誉成果
          </Space>
          <Title level={2}>用成绩记录持续进步</Title>
        </div>

        <Card className="timeline-panel" variant="borderless" styles={{ body: { padding: 0 } }}>
          <Timeline mode="left" items={timelineItems} />
        </Card>
      </div>
    </section>
  );
}
