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

const Placehold = styled.div`
box-sizing: border-box;
margin: 1em 0;
width: 100%;
height: 9vw;
min-height: 8em;
background-color: #F8F9F9;
box-shadow: 1px 4px 23px 3px rgba(0,0,0, 0.2);
border-radius: .25em;
padding: 3vw 4vw;
display: flex;
flex-direction: column;
justify-content: space-between;`;

const Loading = keyframes`{
from {width: 0% }
to {width: 100%;}}`;

const Loader = styled.div<{height: number}>`
${props => `height: ${props.height}%;`}
background: linear-gradient(90deg, rgba(210,210,210,0.5) 0%, rgba(238,238,238,0.7) 100%);
border-radius: 10px;
animation: ${Loading} 0.8s infinite;`

export const Placeholder = ({ style, number = 1, lines = 3 }: any) => {
      return (
        <>{[... new Array(number)].map((_, i: number)=>
        <Placehold style={style} key={i}>
          {[... new Array(lines)].map((_, i: number)=><Loader key={i} height={55/(lines)} ></Loader>)}
        </Placehold>)}
        </>);
};

export default Placeholder;