import React from 'react';

interface TimelineBaseProps {
  id: string;
  title: string;
  description: string;
  isActive: boolean;
  isPast: boolean;
}

export const TimelineBase: React.FC<TimelineBaseProps> = ({
  id,
  title,
  description,
  isActive,
  isPast,
}) => {
  const opacity = isActive ? 'opacity-100' : isPast ? 'opacity-75' : 'opacity-50';
  const scale = isActive ? 'scale-100' : 'scale-95';

  return (
    <div
      className={`transition-all duration-500 ${opacity} ${scale}`}
      data-timeline-id={id}
    >
      <div className="space-y-2">
        <h3 className="text-lg font-semibold">{title}</h3>
        <p className="text-sm text-gray-600">{description}</p>
      </div>
    </div>
  );
};
