'use client';

import React, { useRef, useEffect } from 'react';
import { useCardAnimation } from '@/hooks/useCardAnimation';
import { cn } from '@/lib/utils';

export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';

interface TimelineProcessFlowProps {
  children: React.ReactNode[];
  animationType: CardAnimationType;
  itemCount: number;
  useIndividualTriggers?: boolean;
  className?: string;
}

export const TimelineProcessFlow: React.FC<TimelineProcessFlowProps> = ({
  children,
  animationType,
  itemCount,
  useIndividualTriggers = false,
  className,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);

  const { itemRefs: animationItemRefs } = useCardAnimation({
    animationType,
    itemCount,
    useIndividualTriggers,
  });

  useEffect(() => {
    itemRefs.current = itemRefs.current.slice(0, itemCount);
  }, [itemCount]);

  return (
    <div ref={containerRef} className={cn('timeline-process-flow', className)}>
      {React.Children.map(children, (child, index) => (
        <div
          key={index}
          ref={(el) => {
            if (el) itemRefs.current[index] = el;
            if (animationItemRefs && animationItemRefs[index]) animationItemRefs[index].current = el;
          }}
          className="timeline-item"
        >
          {child}
        </div>
      ))}
    </div>
  );
};

export default TimelineProcessFlow;