import React, { useRef } from 'react';
import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation';

export interface TimelineHorizontalCardStackProps {
  children: React.ReactNode;
  title?: string;
  description?: string;
  tag?: string;
  textboxLayout?: string;
  animationType?: string;
  containerClassName?: string;
  mediaItems?: Array<{ imageSrc?: string; videoSrc?: string; imageAlt?: string; videoAriaLabel?: string }>;
  titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>;
  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
  buttonAnimation?: string;
  tagIcon?: any;
  tagAnimation?: string;
  useInvertedBackground?: boolean;
  ariaLabel?: string;
  className?: string;
  textBoxClassName?: string;
  titleClassName?: string;
  descriptionClassName?: string;
  tagClassName?: string;
  buttonContainerClassName?: string;
  buttonClassName?: string;
  buttonTextClassName?: string;
  cardClassName?: string;
  progressBarClassName?: string;
  mediaContainerClassName?: string;
  mediaClassName?: string;
}

export const TimelineHorizontalCardStack: React.FC<TimelineHorizontalCardStackProps> = ({
  children,
  containerClassName = '',
  ...props
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);

  const animationOptions: UseCardAnimationOptions = {
    containerRef,
    itemRefs,
  };

  const { } = useCardAnimation(animationOptions);

  return (
    <div ref={containerRef} className={containerClassName}>
      {children}
    </div>
  );
};

export default TimelineHorizontalCardStack;
