import React, { memo } from 'react';
import { isNumber } from 'lodash';
import { Text } from 'react-native';
import { withTheme } from '../../branding';
import type { ThemeModeType } from '../BrandFilters/BrandFilters.tsx';
import styles from './styles';

interface PositionProps {
    position?: number;
    theme: ThemeModeType;
}

export const Position = ({ position, theme }: PositionProps) => {
    const themeStyles = styles[theme];

    if (!isNumber(position)) {
        return null;
    }

    return (
        <Text
            testID="positionText"
            style={themeStyles.positionText}
        >{`#${position}`}</Text>
    );
};

export default memo(withTheme(Position));