'use client';

import { RippleArea } from '../ripple/ripple-area';
import { IRippleProps } from '../ripple/ripple.types';
import useRippleEffect from '../ripple/hooks/useRippleEffect';
import React, {
    forwardRef,
    PropsWithChildren,
    useId,
    useRef,
    useState,
} from 'react';

const ButtonLayout = forwardRef<
    HTMLButtonElement,
    PropsWithChildren<any> & IRippleProps
>(function ButtonBase({ centralRipple = false, ...props }, ref) {
    const [isActive, setIsActive] = useState<boolean>(false),
        ripplesRef = useRef(null),
        buttonId = useId(),
        events = useRippleEffect(ripplesRef, setIsActive);

    const { variant, disabled, className } = props;

    const classes = className
        ? `m3 ${className} ${variant}${isActive ? ' is-active' : ''}`
        : `m3 ${variant}${isActive ? ' is-active' : ''}`;

    return (
        <button
            {...props}
            {...events}
            className={classes}
            disabled={disabled}
            id={buttonId}
            ref={ref}
        >
            {props.children}
            <RippleArea
                callback={setIsActive}
                central={centralRipple}
                ref={ripplesRef}
            />
        </button>
    );
});

export { ButtonLayout };