import styled, { keyframes } from 'styled-components';

const animate = keyframes`
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
`;

const shape: { [index: string]: string } = {
  rect: '',
  text: `
    margin-top: 8px;
    margin-bottom: 8px;
    transform-origin: 0 65%;
    transform: translateZ(0) scale(1, 0.65);
    border-radius: 4px;
    text-indent: -999px;

    &:empty:before {
      content: ' ';
    }
  `,
  circle: `
    border-radius: 50%;
  `,
};

export const Element = styled('div')<{ variant: string }>`
  display: block;
  background-color: ${({ theme }) => theme.colors.gray};
  animation: ${animate} 1.5s ease-in-out infinite;
  margin: 5px 0;

  ${(props) => shape[props.variant]}
`;

export default Element;