import React from "react";

interface TimelineItem {
    date: string;
    time: string;
    title: React.ReactNode;
    subtitle?: string;
}

interface Props {
    items: TimelineItem[];
}

const Timeline: React.FC<Props> = ({ items }) => {
    return (
        <div className="max-w-[900px] mx-auto">
            {items.map((item, index) => (
                <div key={index} className="flex">
                    {/* Time */}
                    <p className="text-white-dark dark:text-white-light min-w-[120px] max-w-[120px] text-base font-semibold py-2.5">
                        {item.time}
                    </p>
                    <div className="relative
                        before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px]
                        before:w-2.5 before:h-2.5 before:border-2 before:border-primary before:rounded-full
                        after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px]
                        after:-bottom-[15px] after:w-0 after:border-l-2 after:border-primary">
                    </div>
                    <div className="p-2.5 self-center ml-2.5">
                        <p className="text-dark dark:text-white-light font-semibold text-base">
                            {item.title}
                        </p>

                        {item.subtitle && (
                            <p className="text-gray-600 text-xs font-bold">
                                {item.subtitle}
                            </p>
                        )}
                    </div>
                </div>
            ))}
        </div>
    );
};

export default Timeline;