import type { BaseElementProps } from './types';
import { Button as AntButton } from 'antd';
import type { BaseButtonProps } from 'antd/lib/button/button';
import type { FC } from 'react';
import { useThrottledCallback } from 'use-debounce';

type ElementProps = {
  action: () => void;
  text: string;
};

type ButtonProps = BaseButtonProps & Pick<ElementProps, 'text'>;

function Button({ status, action, text, ...props }: BaseElementProps<never> & ElementProps) {
  const throttledAction = useThrottledCallback(action, 1_200, {
    trailing: false,
  });

  return (
    <AntButton
      disabled={status === 'Disabled'}
      loading={status === 'Loading'}
      onClick={throttledAction}
      {...props}
    >
      {text}
    </AntButton>
  );
}

export default Button as FC<ButtonProps>;