import { ReactNode } from 'react';
import { useCardStack } from './CardStackContext';

export interface CardListProps {
  children: ReactNode;
  className?: string;
  ariaLabel?: string;
}

export function CardList({ children, className = '', ariaLabel = 'Card list' }: CardListProps) {
  const { isVisible, getAnimationProps } = useCardStack();
  const animationProps = getAnimationProps();

  return (
    <div
      className={className}
      aria-label={ariaLabel}
      data-is-visible={animationProps.isVisible}
    >
      {children}
    </div>
  );
}

export default CardList;
