import * as React from 'react';
import Loader, { LoaderProps } from '../../../containers/loader/Loader';
import { Colors } from '../../../models/colors';
import { loaderWrapper, dotsWrapper, dotsInner } from './threeDotsLoader.style';

const ThreeDotsLoader = (props: LoaderProps) => {
	return (
		<Loader
			{...props}
			render={(palette: Colors) => {
				return (
					<div className={loaderWrapper(palette)} data-automation={props.automationName}>
						<div className={dotsWrapper()}>
							{Array(3)
								.fill(0)
								.map((e, i) => <div key={i} className={dotsInner(i, palette)} />)}
						</div>
					</div>
				);
			}}
		/>
	);
};

export default ThreeDotsLoader;