material-you-react/src/primitive-components/button-layout/button-layout.tsx

'use client';

import { bool, string } from 'prop-types';
import { RippleArea } from '../ripple/ripple-area';
import { ButtonLayoutProps } from './button-layout.types';
import useRippleEffect from '../ripple/hooks/useRippleEffect';
import React, { forwardRef, useId, useRef, useState } from 'react';

export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
    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>
        );
    },
);

ButtonLayout.propTypes = {
    centralRipple: bool,
    children: string,
};