import React, { useEffect, FunctionComponent, useContext } from 'react';
import { View, ViewStyle, Image } from 'react-native';
import styles from './ForumBadgeStyles';
import { PixelStyles } from 'react-native-pixel-styles';
import { PixelTopic } from '../../Model/PixelTopic';
import { RicoIcon } from '../../../../../App/Components/RicoIcon/RicoIcon';
import { PixelwolfText } from 'react-native-pixel-components';
import { PixelForum } from '../../Model/PixelForum';

interface IProps {
    // Props type definition
    style?: ViewStyle | ViewStyle[]
    forum: PixelForum
    isBig?: boolean
}

interface IState {
    // State type definition
}

export const ForumBadge: FunctionComponent<IProps> = (props) => {

    const themeStore = useContext(PixelStyles.pixelThemeStoreContext)

    const initialState: IState = {
    };


    // ComponentDidMount
    useEffect(() => {
        return () => {
            //ComponentDidUnmount
        }
    }, [])

    return (
        <View style={[styles.centeredRow, props.style]} >
            <RicoIcon name={'stonks'} color={themeStore.theme.contrastTextColor} size={props.isBig && 25} />
            <PixelwolfText style={[styles.xSmallMarginLeft, themeStore.getContrastTextStyle]} size={props.isBig ? 'b20' : 'c13'} weight={'semibold'}>
                {props.forum.name.toUpperCase()}
            </PixelwolfText>
        </View>
    );
};