import clsx from 'clsx';
import { RightOutlined } from '@ant-design/icons';

import styles from './step.module.scss';

export default function Step(props: {
  stepList: { id: string; desc: string }[];
  title?: string;
  className?: string;
}) {
  return (
    <section className={clsx('section bg-gray', props.className)}>
      <div className="contain">
        <h2 className="text-center">{props.title || '加入流程'}</h2>
        <div className={styles.step}>
          {props.stepList.map((item) => (
            <div className={styles.stepItem} key={`step-${item.id}`}>
              <div className={styles.stepItemTop}>
                <h3>Step {item.id}</h3>
                {item.id !== '4' && <RightOutlined className={styles.icon} />}
              </div>
              <p>{item.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}