import React, { FC } from 'react';
import { LoaderProps, LoaderSizes } from 'types';
import * as S from './styles';

export const Loader: FC<LoaderProps> = ({
	children,
	isLoading,
	message,
	size,
	testId,
}) => {
	if (isLoading) {
		return (
			<S.LoaderContainer data-testid={`${testId}-container`}>
				<S.Loader {...{ size, isLoading, message }} data-testid={`${testId}`} />
				{message && message}
			</S.LoaderContainer>
		);
	}
	return <>{children}</>;
};

Loader.defaultProps = {
	isLoading: true,
	size: LoaderSizes.medium,
	testId: 'loader',
};

export default Loader;