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

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

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

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

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