import React from 'react';
import styled from 'styled-components';
import ApoliticalBrand from '../../../Theme/ApoliticalBrand';

type Props = {
    className?: string,
    width?: string,
    height?: string
  }

const Wrapper = styled.div`
    overflow: hidden;
    width: ${({ width }) => width};
    height: ${({ height }) => height};
`;
const GreyBox = styled.div`
    background-color: ${ApoliticalBrand.color.paleGreyTwo};
    width: 100%;
    height: 100%;
    border-radius: 4.3px;
    position: relative;
    &:after{
        content: "";
        display: block;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        transform: translateX(-100px);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255,0.2), transparent);
        animation: loading 0.8s infinite;
    }
    @keyframes loading {
        100% {
            transform: translateX(100%);
        }
    }
`;

const LoadingPlaceholder = ({ className, width, height }:Props) => (
  <Wrapper className={className} width={width} height={height}>
    <GreyBox />
  </Wrapper>
);

LoadingPlaceholder.defaultProps = {
  className: '',
  width: '340px',
  height: '210px',
};

export default LoadingPlaceholder;