import React, { FC } from 'react';
import { Text, View } from 'react-native';
import { Image } from 'expo-image';

import { getFontSize } from '../../../../utils';
import { API_HOST } from '../../../../constants';

import { ItemStyles } from './styles';

type Props = {
  name: string;
  flag: string;
  cnt: number | string;
  index: number;
};

export const StatisticItem: FC<Props> = (data) => (
  <View style={ItemStyles.wrapper}>
    <Text style={[ItemStyles.nameAndCnt, { fontSize: getFontSize(18) }]}>{data.index + 1}</Text>
    <Image style={ItemStyles.bigFlag} source={{ uri: API_HOST + '/img/flags_new/' + data.flag }} />
    <View style={ItemStyles.contentWrapper}>
      <Text style={[{ width: '75%' }, ItemStyles.nameAndCnt]}>{data.name}</Text>
      <Text style={ItemStyles.nameAndCnt}>{data.cnt}</Text>
    </View>
  </View>
);
