import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { observer } from 'mobx-react-lite';

const Wrapper = styled.div`
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
`;

const stretch = keyframes`
  0% { height: 3px; }
  25% { height: 16px; }
  50% { height: 7px; }
  75% { height: 16px; }
  100% { height: 3px; }
`;

const Dot = styled.div<{ offset: number }>`
  width: 3px;
  height: 3px;
  border-radius: 100px;
  background-color: white;
  animation: ${stretch} 1.8s infinite ${({ offset }) => offset * 0.15}s
    ease-in-out;
`;

export default observer(function PlayingAnimation() {
  return (
    <Wrapper>
      <Dot offset={2} />
      <Dot offset={1} />
      <Dot offset={0} />
      <Dot offset={1} />
      <Dot offset={2} />
    </Wrapper>
  );
});