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, card: {headline: string, points: Array<string>}}>} props.items - Steps, left to right; 3 bullet points switch the card to the narrower `--2` layout, anything else uses `--1`.
 */
export const ProcessFlow = ({ items }) => {
  return (
    <div className="process-flow">
      {items.map((item, index) => (
        <Fragment key={index}>
          <div className={`process-flow-item`}>
            <img
              className={`process-flow__image process-flow__image${index}`}
              src={item.image}
              alt=""
            />
            <div className="process-flow__itemcard">
              <div className={`itemcard__headline${item.card.points.length === 3 ? "--2" : "--1"}`}>
                {item.card.headline}
              </div>
              <ul
                className={`itemcard__text itemcard__text${item.card.points.length === 3 ? "--2" : "--1"}`}>
                {item.card.points.map((point, index) => (
                  <li key={index}>{point}</li>
                ))}
              </ul>
            </div>
          </div>
          {/* {index === 0 &&
            (arrow ? (
              <img src={arrow} className="process-flow__arrow-img" />
            ) : (
              <UIMCIcon name="arrow-long-right" class="process-flow__arrow" />
            ))} */}
        </Fragment>
      ))}
    </div>
  );
};