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

export interface CardListProps {
  children: React.ReactNode;
  containerClassName?: string;
}

export const CardList: React.FC<CardListProps> = ({ children, containerClassName = '' }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
  const bottomContentRef = useRef<HTMLDivElement>(null);
  const perspectiveRef = useRef<HTMLDivElement>(null);

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

  const { } = useCardAnimation(animationOptions);

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

export default CardList;
