import React from 'react';
import {View} from 'react-native';

import Step from './components/Step';
import {ApprovalStepDisplayRow} from './interfaces';
import {styles} from './styles';

interface Props {
  approvalSteps?: ApprovalStepDisplayRow[];
  differentLines?: boolean;
}

export function ApprovalSteps({approvalSteps, differentLines}: Props) {
  return approvalSteps ? (
    <View style={styles.container}>
      {approvalSteps.map((step, index) => (
        <Step
          key={step.id}
          step={step}
          withDivider={index !== approvalSteps.length - 1}
          differentLines={differentLines}
        />
      ))}
    </View>
  ) : null;
}