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

import { color } from '../../constants/style';

import { Props } from './index';

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

const shape = {
  rect: '',
  text: css`
    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: css`
    border-radius: 50%;
  `,
};

export const Element = styled('div')<Props>`
  display: block;
  height: ${props => props.height || 'auto'};
  width: ${props => props.width || 'auto'};
  background-color: ${color.gray};
  animation: ${animate} 1.5s ease-in-out infinite;

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