'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-[34px] flex h-8 w-8 items-center justify-center rounded-full bg-white border shadow-sm">
            {item.icon}
          </div>
          <div className="w-full rounded-xl border bg-white p-4 shadow-sm">
            <div className="flex items-center justify-between">
              <div>
                <h4 className="font-semibold text-gray-900">
                  {item.title}
                </h4>
                {item.subtitle && (
                  <p className="text-xs text-gray-500">{item.subtitle}</p>
                )}
              </div>

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