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

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const HypnosisWrapper = styled('div')`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
`;

const HypnosisWheel = styled('div')`
  width: 200vmin;
  height: 200vmin;
  background: conic-gradient(
    from 0deg,
    #000 0deg,
    #000 45deg,
    #fff 45deg,
    #fff 90deg,
    #000 90deg,
    #000 135deg,
    #fff 135deg,
    #fff 180deg,
    #000 180deg,
    #000 225deg,
    #fff 225deg,
    #fff 270deg,
    #000 270deg,
    #000 315deg,
    #fff 315deg,
    #fff 360deg
  );
  border-radius: 50%;
  animation: ${rotate} 10s linear infinite;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const ContentWrapper = styled('div')`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
`;

const HypnosisBackground = ({ children }) => {
  return (
    <HypnosisWrapper>
      <HypnosisWheel />
      <ContentWrapper>
        {children}
      </ContentWrapper>
    </HypnosisWrapper>
  );
};

export default HypnosisBackground;