import Lottie, { Options } from 'react-lottie';
import { CardContent } from './styled';
import { Typography } from '@sofaltaeu/sofaltaeu-components';

interface AnimationProps {
	json: Options['animationData'];
	maxWidth?: number;
	text?: string;
}
export default function animationLoader({ json, maxWidth = 300, text='' }: AnimationProps) {

	function getOptionsAnimation(animation:Options['animationData']) {
		return {
			loop: true,
			autoplay: true,
			animationData: animation,
			rendererSettings: {
				preserveAspectRatio: 'xMidYMid slice'
			}
		};
	}

	return (
		<CardContent>
			<Lottie
				options={getOptionsAnimation(json)}
				isStopped={false}
				isPaused={false}
				width={maxWidth}
				height={maxWidth}
			/>
			<Typography variant='body2' align='center'>{text}</Typography>
		</CardContent>
	);
}