// @flow
/* eslint react/no-array-index-key: 0 */
import React from 'react';
import type { FormListProps } from './form-list.proptypes';
import { FormBox, FormRow } from '../internals/forms.common';

export const FormList = ({
  items,
  spacing,
  grow,
  shrink,
  basis,
  'data-qa': dataQa,
  'data-cy': dataCy,
  id,
  className,
  ...props
}: FormListProps) => (
  <FormBox
    {...{ spacing, grow, shrink, basis }}
    className={className}
    data-cy={dataCy}
    data-qa={dataQa}
    id={id}
    {...props}
  >
    {items.map((item, index) => (
      <FormRow
        key={index}
        isLast={index + 1 === items.length}
        stacked="column"
        justify="center"
      >
        {item}
      </FormRow>
    ))}
  </FormBox>
);

FormList.displayName = 'FormList';
