import type { ButtonProps } from 'antd';
import { Button as AntdButton } from 'antd';
import _ from 'lodash';
import React, { useMemo } from 'react';

import styles from './index.module.css';

type PropType = {
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  width?: number | string;
  ref?: any;
} & ButtonProps;

const Button: React.FC<PropType> = (param) => {
  const { children, width, onClick } = param;
  const others = _.omit(param, ['children', 'onClick', 'width', 'style', 'className']);
  const onClickThrottle = useMemo(
    () =>
      _.debounce(
        (e) => {
          if (onClick) onClick(e);
        },
        600,
        { leading: true, trailing: false }
      ),
    [onClick]
  );
  return (
    <AntdButton
      style={{
        width,
        ...param.style,
      }}
      className={`${styles.button} ${param.className}`}
      onClick={(e) => onClickThrottle(e)}
      {...others}
    >
      {children}
    </AntdButton>
  );
};

export default Button;