import * as React from 'react';
import type { IStep } from '@automatisch/types';

import AppIcon from 'components/AppIcon';
import IntermediateStepCount from 'components/IntermediateStepCount';

type FlowAppIconsProps = {
  steps: Partial<IStep>[];
}

export default function FlowAppIcons(props: FlowAppIconsProps) {
  const { steps } = props;
  const stepsCount = steps.length;
  const firstStep = steps[0];
  const lastStep = steps[stepsCount - 1];
  const intermeaditeStepCount = stepsCount - 2;


  return (
    <>
      <AppIcon
        name=" "
        variant="rounded"
        url={firstStep.iconUrl}
        imgProps={{ width: 30, height: 30}}
      />

      {intermeaditeStepCount > 0 && <IntermediateStepCount count={intermeaditeStepCount} />}

      <AppIcon
        name=" "
        variant="rounded"
        url={lastStep.iconUrl}
      />
    </>
  )
};