import React, { ReactElement } from 'react';
import {
  TimelineItemWrapper,
  TimelineItemText,
  TimelineItemHelpText,
  TimelineItemContentWrapper,
  TimelineItemMarker,
  TimelineItemLine,
} from './StyledTimeline';

export interface TimelineItemProps {
  helpText: string | ReactElement;
  intent?: 'success' | 'info' | 'warning' | 'danger' | 'error' | 'default';
  text: string | ReactElement;
}

const TimelineItem = ({
  text,
  helpText,
  intent = 'default',
}: TimelineItemProps): ReactElement => {
  return (
    <TimelineItemWrapper>
      <TimelineItemLine />
      <TimelineItemMarker themeIntent={intent} />
      <TimelineItemContentWrapper>
        <TimelineItemText>{text}</TimelineItemText>
        <TimelineItemHelpText>{helpText}</TimelineItemHelpText>
      </TimelineItemContentWrapper>
    </TimelineItemWrapper>
  );
};

export default TimelineItem;