'use client';

import { motion } from 'framer-motion';

interface GradientGridProps {
  className?: string;
  color?: string;
  gridSize?: number;
}

export function GradientGrid({
  className = '',
  color = '#C41E3A',
  gridSize = 8
}: GradientGridProps) {
  const cells = Array.from({ length: gridSize }, (_, row) =>
    Array.from({ length: gridSize }, (_, col) => ({
      row,
      col,
      delay: (row + col) * 0.1
    }))
  ).flat();

  return (
    <div
      className={`absolute inset-0 pointer-events-none ${className}`}
      style={{
        display: 'grid',
        gridTemplateColumns: `repeat(${gridSize}, 1fr)`,
        gridTemplateRows: `repeat(${gridSize}, 1fr)`,
        gap: '1px'
      }}
    >
      {cells.map((cell, index) => (
        <motion.div
          key={index}
          style={{
            background: `linear-gradient(135deg, ${color}05 0%, ${color}10 100%)`
          }}
          initial={{ opacity: 0 }}
          animate={{
            opacity: [0, 0.3, 0.3, 0]
          }}
          transition={{
            duration: 6,
            delay: cell.delay,
            repeat: Infinity,
            ease: 'easeInOut',
            times: [0, 0.3, 0.7, 1]
          }}
        />
      ))}
    </div>
  );
}

export default GradientGrid;