import React from "react";
import { useCardAnimation } from "./hooks/useCardAnimation";

interface CardStackProps {
  children: React.ReactNode;
  className?: string;
  cardsOffset?: number;
  scaleFactor?: number;
  rotationFactor?: number;
  animationDuration?: number;
  ariaLabel: string;
}

export const CardStack: React.FC<CardStackProps> = ({
  children,
  className = "",  cardsOffset = 10,
  scaleFactor = 0.08,
  rotationFactor = 5,
  animationDuration = 500,
  ariaLabel,
}) => {
  const containerRef = React.useRef<HTMLDivElement>(null);
  const { transform } = useCardAnimation({
    containerRef,
    cardsOffset,
    scaleFactor,
    rotationFactor,
    animationDuration,
  });

  const childArray = React.Children.toArray(children);

  return (
    <div
      ref={containerRef}
      className={`relative w-full h-full ${className}`}
      aria-label={ariaLabel}
    >
      {childArray.map((child, index) => {
        const depth = index;
        const scale = 1 - scaleFactor * depth;
        const yOffset = depth * cardsOffset;
        const rotation = depth * rotationFactor;

        return (
          <div
            key={index}
            className="absolute w-full transition-transform"
            style={{
              transform: `translateY(${yOffset}px) scale(${scale}) rotateZ(${rotation}deg)`,
              zIndex: childArray.length - index,
            }}
          >
            {child}
          </div>
        );
      })}
    </div>
  );
};

export default CardStack;