import React, {useMemo} from 'react';
import {View} from 'react-native';
import {Avatar} from '@components/_HuGo/Avatar';
import {useTheme} from '@shared/theme';

import {TrackerProps} from './interfaces';
import {getAvatarByState, styles} from './styles';

export function Tracker({state, continued = true}: TrackerProps) {
  const {theme} = useTheme();
  const avatarProps = useMemo(
    () => getAvatarByState(theme, state),
    [state, theme],
  );

  return (
    <View style={styles.container}>
      <Avatar {...avatarProps} size="sm" />
      {continued && (
        <View
          style={[
            styles.line,
            {
              backgroundColor:
                state === 'complete'
                  ? theme.graphics.hugo[500]
                  : theme.border.neutral.default,
            },
          ]}
        />
      )}
    </View>
  );
}

export * from './interfaces';
