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

const scroll = keyframes`
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
`;

const MatrixWrapper = styled('div')`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: black;
  overflow: hidden;
  color: green;
`;

const MatrixText = styled('div')`
  position: absolute;
  top: 0;
  white-space: nowrap;
  font-family: monospace;
  animation: ${scroll} 5s linear infinite;
`;

const MatrixBackground = ({ children }) => {
  useEffect(() => {
    const matrixWrapper = document.getElementById('matrixWrapper');
    for (let i = 0; i < 50; i++) {
      const text = document.createElement('div');
      text.className = MatrixText.styledComponentId;
      text.style.left = `${Math.random() * 100}%`;
      text.style.animationDuration = `${Math.random() * 10 + 5}s`;
      text.textContent = '01'.repeat(20);
      matrixWrapper.appendChild(text);
    }
  }, []);

  return <MatrixWrapper id="matrixWrapper">{children}</MatrixWrapper>;
};

export default MatrixBackground;