import React, { useEffect } from 'react';
import { styled, keyframes } from '@mui/system';

const move = keyframes`
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
`;

const ShapesWrapper = styled('div')`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
`;

const Shape = styled('div')`
  position: absolute;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.7);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  animation: ${move} 5s infinite ease-in-out;
`;

const GeometricShapesBackground = ({ children }) => {
  useEffect(() => {
    const shapesWrapper = document.getElementById('shapesWrapper');
    for (let i = 0; i < 30; i++) {
      const shape = document.createElement('div');
      shape.className = Shape.styledComponentId;
      shape.style.left = `${Math.random() * 100}%`;
      shape.style.top = `${Math.random() * 100}%`;
      shape.style.width = `${Math.random() * 20 + 20}px`;
      shape.style.height = shape.style.width;
      shape.style.animationDuration = `${Math.random() * 3 + 3}s`;
      shapesWrapper.appendChild(shape);
    }
  }, []);

  return <ShapesWrapper id="shapesWrapper">{children}</ShapesWrapper>;
};

export default GeometricShapesBackground;