import { useRef } from "react";
import TimelineItem, { TimelineItemData } from "./TimelineItem";

interface TimelineListProps {
  items: TimelineItemData[];
  onResubmit?: (id: number) => void;
}

export default function TimelineList({ items, onResubmit }: TimelineListProps) {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div
      ref={containerRef}
      className="timeline-container relative mt-4 overflow-y-auto pr-4"
    >
      <div style={{ direction: 'ltr' }}>
        {/* Vertical Connecting Line */}
        <div className="absolute left-[25px] top-2 bottom-2 w-0.5 bg-gray-100" />

        <div className="space-y-4">
          {[...items].reverse().map((item) => (
            <TimelineItem 
              key={item.id} 
              item={item} 
              onResubmit={onResubmit}
            />
          ))}
        </div>
      </div>

      {/* Custom Scrollbar Styling */}
      <style jsx>{`
        .timeline-container::-webkit-scrollbar {
          width: 6px;
        }
        .timeline-container::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 10px;
        }
        .timeline-container::-webkit-scrollbar-thumb {
          background: #cbd5e1;
          border-radius: 10px;
        }
        .timeline-container::-webkit-scrollbar-thumb:hover {
          background: #94a3b8;
        }
      `}</style>
    </div>
  );
}