import React, { FC } from 'react';
import classnames from 'classnames';
import styles from './index.less';

interface PageProps {
  onRightClick?: () => void;
  onLeftClick?: () => void;
  styleClassName?: string;
  rightBtLabel?: string;
  leftBtLabel?: string;
  children?: React.ReactNode;
  isShowInterval?: boolean;
  leftBtStyle?: string;
  rightBtStyle?: string;
}

/**
 * 底部按钮组件
 */
const FooterButton: FC<PageProps> = (props) => {
  const {
    onRightClick,
    onLeftClick,
    styleClassName,
    rightBtLabel,
    leftBtLabel,
    children,
    isShowInterval = true,
    leftBtStyle,
    rightBtStyle,
  } = props;
  return (
    <div
      className={classnames({
        [styles.container]: true,
        [`${styleClassName}`]: !!styleClassName,
      })}
    >
      {children}
      {leftBtLabel && !!!children && (
        <div
          className={classnames({
            [styles.left]: true,
            [`${leftBtStyle}`]: !!leftBtStyle,
          })}
          onClick={() => onLeftClick && onLeftClick()}
        >
          {leftBtLabel}
        </div>
      )}
      {leftBtLabel && rightBtLabel && !!!children && isShowInterval && (
        <div className={styles.interval} />
      )}
      {rightBtLabel && !!!children && (
        <div
          className={classnames({
            [styles.right]: true,
            [`${rightBtStyle}`]: !!rightBtStyle,
          })}
          onClick={() => onRightClick && onRightClick()}
        >
          {rightBtLabel}
        </div>
      )}
    </div>
  );
};
export default FooterButton;