'use client';

import { motion } from 'framer-motion';

interface GeometricShapeProps {
  className?: string;
  color?: string;
}

export function GeometricShapes({
  className = '',
  color = '#C41E3A'
}: GeometricShapeProps) {
  const shapes = [
    { type: 'circle', size: 120, x: 10, y: 15, delay: 0 },
    { type: 'square', size: 80, x: 80, y: 20, delay: 1 },
    { type: 'triangle', size: 60, x: 70, y: 60, delay: 2 },
    { type: 'circle', size: 40, x: 20, y: 70, delay: 3 },
    { type: 'square', size: 50, x: 85, y: 75, delay: 4 }
  ];

  return (
    <div className={`absolute inset-0 pointer-events-none ${className}`}>
      {shapes.map((shape, index) => (
        <motion.div
          key={index}
          className="absolute border-2"
          style={{
            borderColor: `${color}20`,
            width: shape.size,
            height: shape.size,
            left: `${shape.x}%`,
            top: `${shape.y}%`,
            borderRadius: shape.type === 'circle' ? '50%' : '0',
            transform: shape.type === 'triangle' ? 'rotate(0deg)' : 'rotate(0deg)'
          }}
          initial={{ opacity: 0, scale: 0, rotate: 0 }}
          animate={{
            opacity: [0, 0.15, 0.15, 0],
            scale: [0, 1, 1, 0],
            rotate: [0, 45, 45, 0]
          }}
          transition={{
            duration: 10,
            delay: shape.delay,
            repeat: Infinity,
            ease: 'easeInOut',
            times: [0, 0.2, 0.8, 1]
          }}
        />
      ))}
    </div>
  );
}

export default GeometricShapes;