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

const moveBackground = keyframes`
  from {
    transform: translate3d(0px, 0px, 0px);
  }
  to { 
    transform: translate3d(1000px, 0px, 0px);
  }
`;

const BackgroundContainer = styled('div')`
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
`;

const Stars = styled('div')`
  background: black url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png') repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
`;

const Twinkling = styled('div')`
  width: 10000px;
  height: 100%;
  background: transparent url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png') repeat;
  background-size: 1000px 1000px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  animation: ${moveBackground} 70s linear infinite;
`;

const Clouds = styled('div')`
  width: 10000px;
  height: 100%;
  background: transparent url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png') repeat;
  background-size: 1000px 1000px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  animation: ${moveBackground} 150s linear infinite;
`;

const MoonImage = styled('img')`
  height: 70vh;
  width: 70vh;
  position: absolute;
  z-index: 3;
  right: 20px;
`;

const SpookyMoonBackground = ({ children }) => {
  return (
    <BackgroundContainer>
      <Stars />
      <Twinkling />
      <Clouds />
      <MoonImage src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/moon2.png" alt="Moon" />
      {children}
    </BackgroundContainer>
  );
};

export default SpookyMoonBackground;