import React from 'react';
import useCardAnimation from '../../hooks/useCardAnimation';

interface GridLayoutProps {
  items?: any[];
  columns?: number;
  className?: string;
}

const GridLayout: React.FC<GridLayoutProps> = ({
  items = [],
  columns = 3,
  className = '',
}) => {
  const { transform } = useCardAnimation({ autoPlay: false });

  return (
    <div className={`grid-layout ${className}`}>
      <div
        className="grid-container"
        style={{
          display: 'grid',
          gridTemplateColumns: `repeat(${columns}, 1fr)`,
          gap: '1rem',
        }}
      >
        {items.map((item, index) => (
          <div
            key={item.id || index}
            className="grid-item"
            style={{ transform }}
          >
            {item.content}
          </div>
        ))}
      </div>
    </div>
  );
};

export default GridLayout;