import React, { ReactElement } from 'react';
import css from '../../utils/css';
import { TimelineWrapper } from './StyledTimeline';
import TimelineItem from './TimelineItem';

import { CommonProps } from '../common';

export interface TimelineProps extends CommonProps {
  /**
   * Array of timeline items. Each item is an object of:
   * * helpText: string or ReactElement. To render timeline help text description.
   * * id: string or number. To use as React key.
   * * intent?: 'success' | 'info' | 'warning' | 'danger' | 'error'. Visual intent color to apply to timeline item. When it is not defined, a `grey` color intent will be applied.
   * * text: string or ReactElement. To render timeline text title.
   */
  items: {
    helpText: string | ReactElement;
    id: string | number;
    intent?: 'success' | 'info' | 'warning' | 'danger' | 'error';
    text: string | ReactElement;
  }[];
}

const Timeline = ({
  items,
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: TimelineProps): ReactElement => {
  return (
    <TimelineWrapper
      id={id}
      className={className}
      style={{ ...style, ...css(sx) }}
      data-test-id={dataTestId}
    >
      {items.map(item => (
        <TimelineItem
          key={item.id}
          text={item.text}
          helpText={item.helpText}
          intent={item.intent}
        />
      ))}
    </TimelineWrapper>
  );
};

export default Timeline;