import { memo } from "react";
import { Calendar } from "lucide-react";
import type { TimelineEvent } from "@shared/schema";
import { Timeline, TimelineItem } from "@/components/ui/timeline";

interface AuthorTimelineProps {
  events: TimelineEvent[];
}
export const AuthorTimeline = memo(function AuthorTimeline({
  events,
}: AuthorTimelineProps) {
  if (!events.length) return null;
  const sorted = events.slice().sort((a, b) => a.year - b.year);
  return (
    <section className="py-2" aria-labelledby="author-timeline-heading">
      <h3 id="author-timeline-heading" className="sr-only">
        Timeline
      </h3>
      <Timeline>
        {sorted.map((event) => (
          <TimelineItem
            key={event.id}
            date={String(event.year)}
            title={event.title}
            description={event.description}
            customDot={
              <div className="w-3 h-3 rounded-full bg-primary/80 flex items-center justify-center">
                <Calendar className="h-2.5 w-2.5 text-primary-foreground" />
              </div>
            }
          />
        ))}
      </Timeline>
    </section>
  );
});
