import React, {memo} from 'react';
import {View, ViewStyle} from 'react-native';
import {IconImage} from '@components/Image';
import RedBubble from '@components/RedBubble';
import {Icon} from '@interfaces/icon';
import Text from '@components/Text';

import {styles} from './styles';

interface Props {
  title: string;
  icon?: Icon | string;
  style?: ViewStyle;
  unreadMessages?: number;
}

function TrainingItem({title, icon, unreadMessages, style}: Props) {
  return (
    <View style={[styles.articleContainer, style]}>
      {!!unreadMessages && (
        <RedBubble value={unreadMessages} style={styles.redBubble} />
      )}
      {icon && (
        <IconImage
          icon={icon}
          containerStyle={styles.marginRight}
          padding={30}
          size="lg"
        />
      )}
      <Text variant="h5" numberOfLines={3} style={styles.titleText}>
        {title}
      </Text>
    </View>
  );
}

export default memo(TrainingItem);
