import React, { memo } from 'react';
import { View } from 'react-native';
import CountryLabel from '../CountryLabel';
import FollowersLabel from '../FollowersLabel';
import Trend from '../Trend';
import styles from './styles';
import Position from '../Position';

interface MetricsProps {
    countryCode?: string;
    followersCount?: number;
    isNewlyEntered?: boolean;
    trendValue?: number;
    positionValue?: number;
}

export const Metrics = ({
    countryCode,
    followersCount,
    isNewlyEntered,
    trendValue,
    positionValue
}: MetricsProps) => {
    return (
        <View testID="metrics" style={styles.metricsContainer}>
            <View style={styles.leftSide}>
                <CountryLabel countryCode={countryCode} />
                <FollowersLabel followersCount={followersCount} />
            </View>
            <View style={styles.rightSide}>
                <Position position={positionValue} />
                <Trend
                    trendValue={trendValue}
                    isNewlyEntered={isNewlyEntered}
                />
            </View>
        </View>
    );
};

export default memo(Metrics);