import React from 'react';
import GridMotion from '../reactbits/Backgrounds/GridMotion/GridMotion';
import StatsSection from './StatsSection';

const GridSection = ({ posters = [], stats = {} }) => {
  // Функция для перемешивания массива
  const shuffleArray = (array) => {
    const shuffled = [...array];
    for (let i = shuffled.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
    }
    return shuffled;
  };

  // Перемешиваем постеры
  const shuffledPosters = shuffleArray(posters);

  return (
    <div className="relative -mt-16">
      {/* Stats Section with Background */}
      <div className="absolute inset-0 z-10 flex items-center justify-center">
        <div className="w-full max-w-4xl mx-auto px-4">
          <div className="bg-campfire-charcoal/80 backdrop-blur-md rounded-lg p-6 border border-campfire-ash/20">
            <StatsSection stats={stats} />
          </div>
        </div>
      </div>

      {/* Grid Motion Background */}
      <div className="relative overflow-hidden">
        {shuffledPosters.length > 0 && (
          <GridMotion
            items={shuffledPosters}
            gradientColor="rgba(23, 23, 23, 0.8)"
            className="absolute inset-0"
          />
        )}
      </div>
    </div>
  );
};

export default GridSection; 