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

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

export function ButtonCarousel({ children, className = '', ariaLabel = 'Button carousel' }: ButtonCarouselProps) {
  const { isVisible, getAnimationProps } = useCardStack();
  const animationProps = getAnimationProps();

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

export default ButtonCarousel;
