'use client';

import useRippleBuilder from './hooks/useRippleBuilder';
import React, { forwardRef, useId, useRef } from 'react';
import { RippleAreaProps, RippleContainer } from './ripple.types';

const rippleAreaContext = React.createContext(false);

const RippleEffect = forwardRef<RippleContainer, RippleAreaProps>(
    ({ central = false, ...props }, ref) => {
        const uniqueId = useId(),
            rippleDomain = useRef<HTMLSpanElement>(null),
            clicked = useRef<boolean>(false),
            ripples = useRippleBuilder(clicked, rippleDomain, central, ref);

        return (
            <span
                className={`m3 m3-ripple-domain ${props.className ?? ''}`.trimEnd()}
                id={uniqueId}
                ref={rippleDomain}
            >
                <rippleAreaContext.Provider value={clicked.current}>
                    {Object.values(ripples)}
                </rippleAreaContext.Provider>
            </span>
        );
    },
);

export { rippleAreaContext, RippleEffect };