import { Box } from '@mui/material';
import heart from '../../../assets/images/heart.svg';

export default function MinecraftBackground() {
  return (
    <Box
      sx={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        opacity: 0.25,
        overflow: 'hidden',
        zIndex: -10,
      }}
    >
      <Box
        sx={{
          position: 'absolute',
          bottom: 0,
          right: 0,
          gap: '1vw',
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
          rotate: '-20deg',
          paddingTop: '30vw',
        }}
      >
        <img
          src={heart}
          draggable={false}
          style={{
            width: '20vw',
            height: '20vw',
            rotate: '-20deg',
            userSelect: 'none',
          }}
        />
        <img
          src={heart}
          draggable={false}
          style={{
            width: '20vw',
            height: '20vw',
            paddingBottom: '5vw',
            userSelect: 'none',
          }}
        />
        <img
          src={heart}
          draggable={false}
          style={{
            width: '20vw',
            height: '20vw',
            rotate: '20deg',
            userSelect: 'none',
          }}
        />
      </Box>
      <Box
        sx={{
          position: 'absolute',
          top: 0,
          left: 0,
          gap: '1vw',
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
          rotate: '160deg',
          paddingTop: '80vw',
        }}
      >
        <img
          src={heart}
          draggable={false}
          style={{
            width: '20vw',
            height: '20vw',
            rotate: '-20deg',
            userSelect: 'none',
          }}
        />
        <img
          src={heart}
          draggable={false}
          style={{
            width: '20vw',
            height: '20vw',
            paddingBottom: '5vw',
            userSelect: 'none',
          }}
        />
        <img
          src={heart}
          draggable={false}
          style={{
            width: '20vw',
            height: '20vw',
            rotate: '20deg',
            userSelect: 'none',
          }}
        />
      </Box>
    </Box>
  );
}