import React from 'react';
import { Button, ButtonProps } from 'antd';
import classnames from 'classnames';

export type ProButtonProp = ButtonProps & {
  proType?: 'subPrimary';
  className?: string;
};

const ProButton: React.FC<ProButtonProp> = function ({ proType, className, ...props }) {
  const proClassName = React.useMemo(() => {
    switch (proType) {
      case 'subPrimary':
        return '!bg-bgColorTertiary !border-bgColorTertiary !hover:bg-bgColorSecondary !hover:border-bgColorSecondary';
      default:
        return '';
    }
  }, [proType]);

  return (
    <Button {...props} className={classnames(proClassName, className)}>
      {props.children}
    </Button>
  );
};

export default ProButton;