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

const waveAnimation = keyframes`
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
`;

const Waves = styled('div')`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://www.transparenttextures.com/patterns/sea.png');
  background-size: cover;
  animation: ${waveAnimation} 10s linear infinite;
  z-index: -1;
`;

const WavesBackground = ({ children }) => {
  return <Waves>{children}</Waves>;
};

export default WavesBackground;