export const useRipple = (e: Event, isRipple: boolean): void => {
    if (isRipple) {
        const initElelemnt = e.currentTarget as HTMLElement;
        initElelemnt.style.position = 'relative';
        const rippleElement = document.createElement('span');
        rippleElement.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
        rippleElement.style.width = '100%';
        rippleElement.style.height = '100%';
        rippleElement.style.position = 'absolute';
        rippleElement.style.left = '0';
        rippleElement.style.top = '0';
        rippleElement.style.transform = 'scaleX(0)';

        initElelemnt.appendChild(rippleElement);

        rippleElement.animate([{ transform: 'scaleX(1)', opacity: 0 }], { duration: 500 }).addEventListener('finish', () => {
            initElelemnt.removeChild(rippleElement);
        });
    }
};