import React from 'react';
import {View} from 'react-native';
import {IconChevronRight} from '@tabler/icons-react-native';
import {IconButton} from '@components/_HuGo/Button';
import {Pill} from '@components/_HuGo/Pill';
import {Title} from '@components/_HuGo/Title';
import {Tracker} from '@components/_HuGo/Tracker';

import {TimelineProps} from './interfaces';
import {styles} from './styles';

export function Timeline({
  state,
  continued = true,
  children,
  title,
  topText,
  description,
  titleSize = 's',
  pill,
  onActionPress,
}: TimelineProps) {
  return (
    <View style={styles.container}>
      <Tracker state={state} continued={continued} />
      <View style={styles.content}>
        {children ? (
          children
        ) : (
          <View style={styles.row}>
            <Title
              title={title}
              topText={topText}
              description={description}
              size={titleSize}
              style={styles.title}
            />
            {pill && <Pill {...pill} />}
            {onActionPress && (
              <IconButton
                Icon={IconChevronRight}
                onPress={onActionPress}
                variant="tertiary"
              />
            )}
          </View>
        )}
      </View>
    </View>
  );
}