import { Button } from 'antd';
import styles from './index.less';

type WorkFlowProps = {
  content: string;
  buttonText: string;
  tips?: string;
  onClick?: () => void;
  buttonTop?: number;
  x: number;
  y: number;
};

function WorkFlow({ content, buttonText, tips, buttonTop = 20, x, y, onClick }: WorkFlowProps) {
  return (
    <div className={styles['work-flow']} style={{ left: `${x}px`, top: `${y}px` }}>
      {tips && <div className={styles['work-flow__tips']}>{tips}</div>}
      <div className={styles['work-flow__content']}>{content}</div>
      <Button
        className={styles['work-flow__button']}
        type="primary"
        style={{ marginTop: `${buttonTop}px` }}
        onClick={onClick}
      >
        {buttonText}
      </Button>
    </div>
  );
}

export default WorkFlow;
