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

const wave = keyframes`
  0% {
    width: 26px;
    height: 26px;
  }
  100% {
    width: 500px;
    height: 500px;
  }
`;

const Logo = styled('div')`
  position: absolute;
  width: 246px;
  height: 80px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-image: url("https://res.cloudinary.com/dx25lltre/image/upload/v1707175639/Leumas/Leumas_Tech_Logo_900_x_300_io3gk6.png");
  background-color: #39f;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden;
    box-shadow:
      0 0 10px 5px rgba(255, 255, 255, 1),
      inset 0 0 10px 5px #fff;
  }

  &:hover::after {
    visibility: visible;
    animation: ${wave} 2s forwards;
  }
`;

const Info = styled('div')`
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 3px 5px;
  font-style: italic;
  color: #999;

  a {
    color: inherit;
    text-decoration: none;
  }
`;

const LeumasLogo = () => (
  <div>
    <Logo id="logo" />
    <Info id="info">
      Leumas Tech
    </Info>
  </div>
);

export default LeumasLogo;