import { Fragment } from "react";
import { UIMCIcon } from "@ui-marcom/react/icon";
import "./ProcessFlow.scss";

/**
 * N flat step images (photo/mockup with title+bullets already baked in)
 * connected by arrows ("processFlow" element type).
 *
 * @param {Object} props
 * @param {Array<{image: string}>} props.items - Steps, left to right.
 */
export const ProcessFlow = ({ items }) => {
  return (
    <div className="process-flow">
      {items.map((item, index) => (
        <Fragment key={index}>
          {index > 0 && <UIMCIcon name="arrow-long-right" class="process-flow__arrow" />}
          <img className="process-flow__image" src={item.image} alt="" />
        </Fragment>
      ))}
    </div>
  );
};