import React, {FC} from 'react';

import {IWavyIcon} from './wavy-icon.type';
import {WavyIconStyle as S} from './wavy-icon.style';

export const WavyIconComponent: FC<IWavyIcon> = ({
    name,
    color,
    ...restProps
}) => {
    return (
        <S.Container {...restProps}>
            <S.Wave color={color} opacity={0.1}>
                <S.Wave padding={2.5} color={color} opacity={0.3}>
                    {name === 'danger' && <S.DangerIcon color={color} />}
                    {name === 'info' && <S.InfoIcon color={color} />}
                    {name === 'check' && <S.SuccessIcon color={color} />}
                </S.Wave>
            </S.Wave>
        </S.Container>
    );
};