import React, {memo, ReactNode} from 'react';
import {useTranslation} from 'react-i18next';
import {Title} from '@components';
import {FormStep} from '@components/DynamicForm/interfaces';
import {Goal} from '@modules/goals/interfaces';

import FormItem from '../FormItem';
import {styles} from './styles';

interface Props {
  stepData: FormStep<Goal>[];
  StepBodyComponent?: (data: FormStep) => ReactNode;
}
function FormGoalsList({stepData, StepBodyComponent}: Props) {
  const {t} = useTranslation();

  return (
    <>
      <Title
        title={t('screens.Goals')}
        description={t('performance.goals_description')}
        style={styles.title}
      />
      {stepData.map(item => (
        <FormItem
          key={item.metadata?.id}
          data={item}
          BodyComponent={StepBodyComponent}
          reviewId={item.reviewId}
        />
      ))}
    </>
  );
}

const MemoizedFormGoalsList = memo(FormGoalsList);

export {MemoizedFormGoalsList as FormGoalsList};
