'use client';

import { ReactNode } from 'react';

export type TimelineItem = {
  id: string | number;
  title: string;
  subtitle?: string;
  description?: string;
  date?: string;
  icon?: ReactNode;
};

type Props = {
  items: TimelineItem[];
};

export default function Timeline({ items }: Props) {
  return (
    <div className="relative border-l border-gray-200 pl-6 space-y-6">
      {items.map((item) => (
        <div key={item.id} className="relative flex gap-4">
          
          <div className="absolute -left-[44px] flex h-10 w-10 items-center justify-center rounded-full bg-white border shadow-sm">
            {item.icon}
          </div>
          <div className="w-full rounded-lg border bg-white p-2 shadow-sm">
            <div className="flex items-center justify-between">
              <div>
                <h5 className="font-medium text-gray-900 text-base">
                  {item.title}
                </h5>
                {item.subtitle && (
                  <p className="text-xs font-medium text-blue-600">
                    {item.subtitle}
                  </p>
                )}
              </div>

              {item.date && (
                <span className="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-800">
                  {item.date}
                </span>
              )}
            </div>
            {item.description && (
              <p className="mt-1 text-sm text-gray-700">
                {item.description}
              </p>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}