'use client';

import { useRef } from 'react';
import { useButton } from 'react-aria';

import Button, { Props } from './Button';

// Temporary workaround to make click handlers work with `react-aria-components`
const ReactAriaCompatButton: React.FC<Props> = (props) => {
  const { children, onClick, disabled, ...restProps } = props;
  const ref = useRef(null);
  const { buttonProps } = useButton(
    {
      // need to explicitly set isDisabled to disable the button, since there's a prop name conflict with the
      // `disabled` prop passed to the `Button` component
      isDisabled: disabled,
      onPress:
        onClick &&
        ((e) => {
          onClick(e as any);
        }),
    },
    ref
  );
  return (
    <Button {...({ ...restProps, ...buttonProps } as Props)}>{children}</Button>
  );
};

export default ReactAriaCompatButton;