import { Box } from '@mui/material';
import './checkmark.css';

import type { BoxProps } from '@mui/material';

export const AnimatedIcon = (_props?: AnimatedIconProps) => {
	const { variant = 'success', width, height, sx, ...props } = _props || {};
	const isError = variant === 'error';

	return (
		<Box
			{...{
				sx: {
					display: 'flex',
					justifyContent: 'center',
					width: '100%',
					height: '100%',
					...sx,
				},
				...props,
			}}
		>
			<svg
				className={isError ? 'checkmark error' : 'checkmark'}
				xmlns='http://www.w3.org/2000/svg'
				viewBox='0 0 50 50'
				width={(width as string | number) || 'inherit'}
				height={(height as string | number) || 'inherit'}
			>
				<circle
					className={
						isError ? 'checkmark_circle error' : 'checkmark_circle'
					}
					cx='26'
					cy='26'
					r='25'
					fill='none'
				/>
				{!isError && (
					<path
						className='checkmark_check'
						fill='none'
						d='M14.1 27.2l7.1 7.2 16.7-16.8'
					/>
				)}
				{isError && (
					<path
						className='checkmark_check error'
						fill='none'
						d='M14.1 14.1l23.8 23.8 m0,-23.8 l-23.8,23.8'
					/>
				)}
			</svg>
		</Box>
	);
};

export interface AnimatedIconProps extends BoxProps {
	variant?: 'success' | 'error';
}
