import { getServerT, getServerLocale } from "@/lib/i18n/server";

interface TimelineSectionProps {
  locale: string;
}

export async function TimelineSection({ locale }: TimelineSectionProps) {
  const t = await getServerT(locale, "about");

  const rows = [
    { key: "y2014", year: t("timeline.y2014_year"), title: t("timeline.y2014_title"), desc: t("timeline.y2014_desc"), live: false },
    { key: "y2016", year: t("timeline.y2016_year"), title: t("timeline.y2016_title"), desc: t("timeline.y2016_desc"), live: false },
    { key: "y2018", year: t("timeline.y2018_year"), title: t("timeline.y2018_title"), desc: t("timeline.y2018_desc"), live: false },
    { key: "y2020", year: t("timeline.y2020_year"), title: t("timeline.y2020_title"), desc: t("timeline.y2020_desc"), live: false },
    { key: "y2022", year: t("timeline.y2022_year"), title: t("timeline.y2022_title"), desc: t("timeline.y2022_desc"), live: false },
    { key: "y2024", year: t("timeline.y2024_year"), title: t("timeline.y2024_title"), desc: t("timeline.y2024_desc"), live: false },
    { key: "y2026", year: t("timeline.y2026_year"), title: t("timeline.y2026_title"), desc: t("timeline.y2026_desc"), live: true },
  ];

  return (
    <section className="timeline-band">
      <div className="wrap">
        <div className="about-head">
          <div>
            <div className="kicker">{t("timeline.kicker")}</div>
            <h2>{t("timeline.heading")}</h2>
          </div>
          <div className="right">
            <p>{t("timeline.right")}</p>
          </div>
        </div>
        <div className="timeline">
          {rows.map((row) => (
            <div key={row.key} className={`row${row.live ? " live" : ""}`}>
              <span className="year">{row.year}</span>
              <div className="item">
                <h4>{row.title}</h4>
                <p>{row.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}