import React, { forwardRef } from "react";

import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";

import { useRipple } from "../../../utils/useRipple";
import { StyledButton } from "./Button.styled";

type Props = React.ComponentProps<typeof StyledButton>;

const Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {
    const { children, onPointerDown, onKeyDown, ...rest } = props;
    const innerRef = useForwardedRef(ref);
    const ripple = useRipple({ ref: innerRef, onPointerDown, onKeyDown });

    return (
        <StyledButton
            ref={innerRef}
            onPointerDown={ripple.onPointerDown}
            onKeyDown={ripple.onKeyDown}
            {...rest}
        >
            {children}
            {ripple.ripples}
        </StyledButton>
    );
});

Button.displayName = "Button";
Button.toString = () => StyledButton.toString();

export {
    Button,
};
