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

const twinkling = keyframes`
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
`;

const Stars = styled('div')`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: -1;
  overflow: hidden;
  
  &:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: url('https://www.transparenttextures.com/patterns/stardust.png');
    animation: ${twinkling} 5s linear infinite;
  }
`;

const StarryNightBackground = ({ children }) => {
  return <Stars>{children}</Stars>;
};

export default StarryNightBackground;