import React from 'react';

interface TimelineItem {
  id: string;
  title: string;
  description: string;
  date: string;
  status: 'completed' | 'active' | 'pending';
}

interface TimelineBaseProps {
  items: TimelineItem[];
  orientation?: 'vertical' | 'horizontal';
  variant?: 'default' | 'compact' | 'detailed';
  className?: string;
}

export const TimelineBase: React.FC<TimelineBaseProps> = ({
  items,
  orientation = 'vertical',
  className = ''
}) => {
  const getStatusColor = (status: TimelineItem['status']) => {
    switch (status) {
      case 'completed':
        return 'bg-green-500';
      case 'active':
        return 'bg-blue-500';
      case 'pending':
        return 'bg-gray-300';
      default:
        return 'bg-gray-300';
    }
  };

  const getTextColor = (status: TimelineItem['status']) => {
    switch (status) {
      case 'completed':
        return 'text-green-700';
      case 'active':
        return 'text-blue-700';
      case 'pending':
        return 'text-gray-500';
      default:
        return 'text-gray-500';
    }
  };

  if (orientation === 'horizontal') {
    return (
      <div className={`flex items-center space-x-4 ${className}`}>
        {items.map((item, index) => (
          <div key={item.id} className="flex items-center">
            <div className="flex flex-col items-center">
              <div className={`w-4 h-4 rounded-full ${getStatusColor(item.status)}`} />
              <div className="mt-2 text-center">
                <div className={`text-sm font-medium ${getTextColor(item.status)}`}>
                  {item.title}
                </div>
                <div className="text-xs text-gray-500 mt-1">{item.date}</div>
              </div>
            </div>
            {index < items.length - 1 && (
              <div className="w-8 h-px bg-gray-300 mx-4" />
            )}
          </div>
        ))}
      </div>
    );
  }

  return (
    <div className={`space-y-4 ${className}`}>
      {items.map((item, index) => (
        <div key={item.id} className="flex items-start space-x-4">
          <div className="flex flex-col items-center">
            <div className={`w-4 h-4 rounded-full ${getStatusColor(item.status)}`} />
            {index < items.length - 1 && (
              <div className="w-px h-8 bg-gray-300 mt-2" />
            )}
          </div>
          <div className="flex-1 pb-4">
            <div className={`font-medium ${getTextColor(item.status)}`}>
              {item.title}
            </div>
            <div className="text-sm text-gray-600 mt-1">
              {item.description}
            </div>
            <div className="text-xs text-gray-500 mt-2">{item.date}</div>
          </div>
        </div>
      ))}
    </div>
  );
};