Timeline 1

import { cn } from "@/lib/utils";

import type { Surface } from "../_types/common";
import type { TimelineContent } from "../_types/timeline";
import { defaultTimeline1Content } from "./data";
import { SectionHeader, surfaceClass, toneFor } from "./section-header";

/** Header in a narrow column beside a ruled list of years. */
export default function Timeline1({
  content = defaultTimeline1Content,
  surface = "muted",
}: {
  content?: TimelineContent;
  surface?: Surface;
}) {
  return (
    <section className={cn("py-20 sm:py-28", surfaceClass[surface])}>
      <div className="mx-auto max-w-7xl px-5 sm:px-8 lg:px-12">
        <div className="grid gap-12 lg:grid-cols-12 lg:gap-16">
          <div className="lg:col-span-4">
            <SectionHeader
              description={content.description}
              eyebrow={content.eyebrow}
              size="sm"
              title={content.title}
              tone={toneFor(surface)}
            />
          </div>

          {/* Rows sit on a `gap-px` parent whose background is the rule
              colour, so each one repaints the band's own surface. */}
          <ol className="grid gap-px overflow-hidden rounded-lg bg-border lg:col-span-8">
            {content.items.map((item) => (
              <li
                className={cn(
                  "group grid gap-4 p-8 transition-colors hover:bg-card sm:grid-cols-[8rem_1fr] sm:items-baseline lg:p-10",
                  surfaceClass[surface],
                )}
                key={item.year}
              >
                <span className="font-display text-4xl text-muted-foreground/40 transition-colors group-hover:text-secondary">
                  {item.year}
                </span>
                <p className="text-muted-foreground text-sm leading-relaxed">
                  {item.body}
                </p>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}