import React from 'react';
import { useCurrentFrame, spring, useVideoConfig } from 'remotion';

interface StaggeredGridProps {
  children: React.ReactNode[];
  delayPerItem?: number;
  columns?: number;
  gap?: number;
  style?: React.CSSProperties;
}

export const StaggeredGrid: React.FC<StaggeredGridProps> = ({
  children,
  delayPerItem = 3,
  columns = 6,
  gap = 12,
  style = {},
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: `repeat(${columns}, 1fr)`,
        gap,
        ...style,
      }}
    >
      {children.map((child, i) => {
        const scale = spring({
          frame: frame - i * delayPerItem,
          fps,
          config: { damping: 20, stiffness: 200 },
        });
        return (
          <div
            key={i}
            style={{
              transform: `scale(${scale})`,
              opacity: scale,
            }}
          >
            {child}
          </div>
        );
      })}
    </div>
  );
};
