import { TimelineEvent } from "@shared/schema";

interface AuthorTimelineProps {
  events: TimelineEvent[];
}

export function AuthorTimeline({ events }: AuthorTimelineProps) {
  // Sort events chronologically
  const sortedEvents = [...events].sort((a, b) => a.year - b.year);

  return (
    <div className="max-w-3xl mx-auto py-4">
      <div className="relative">
        {/* Timeline line */}
        <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-sage/30 dark:bg-sage/20"></div>
        
        {/* Events */}
        <div className="space-y-8">
          {sortedEvents.map((event, index) => (
            <div key={event.id} className="relative flex items-start gap-6">
              {/* Year indicator */}
              <div className="flex-shrink-0 w-16 h-16 rounded-full bg-paper dark:bg-dark-paper border-4 border-cream dark:border-dark-surface flex items-center justify-center z-10">
                <span className="text-navy dark:text-cream font-serif font-bold">{event.year}</span>
              </div>
              
              {/* Event details */}
              <div className="flex-1 bg-cream dark:bg-dark-surface p-4 rounded-lg shadow-sm border border-sage/10 dark:border-sage/5">
                <h3 className="text-lg font-serif font-semibold text-navy dark:text-cream mb-2">
                  {event.title}
                </h3>
                {event.description && (
                  <p className="text-navy/80 dark:text-cream/80">
                    {event.description}
                  </p>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
