import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconBallFootball, IconTargetArrow} from '@tabler/icons-react-native';
import {CardContainer, Typography} from '@components';
import {UserRankingSummary} from '@modules/prodev2/interfaces';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  ranking: UserRankingSummary;
}

export function StatsCard({ranking}: Props) {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();

  return (
    <CardContainer>
      <View style={styles.container}>
        <View style={styles.statBlock}>
          <View
            style={[
              styles.iconCircle,
              {backgroundColor: theme.background.elements.brand},
            ]}>
            <IconBallFootball
              size={iconSizes.x5}
              color={theme.text.neutral.brand}
            />
          </View>
          <View style={styles.statText}>
            <Typography variant="xxs" color={theme.text.neutral.lighter}>
              {t('sportsPool.ranking_page.results_label')}
            </Typography>
            <Typography variant="s" weight="semiBold">
              {t('sportsPool.ranking_page.positive_title')}
            </Typography>
          </View>
          {ranking.correctResults != null && (
            <Typography variant="l" weight="semiBold">
              {ranking.correctResults}
            </Typography>
          )}
        </View>

        <View
          style={[
            styles.verticalDivider,
            {backgroundColor: theme.border.neutral.default},
          ]}
        />

        <View style={styles.statBlock}>
          <View
            style={[
              styles.iconCircle,
              {backgroundColor: theme.background.elements.brand},
            ]}>
            <IconTargetArrow
              size={iconSizes.x5}
              color={theme.text.neutral.brand}
            />
          </View>
          <View style={styles.statText}>
            <Typography variant="xxs" color={theme.text.neutral.lighter}>
              {t('sportsPool.ranking_page.results_label')}
            </Typography>
            <Typography variant="s" weight="semiBold">
              {t('sportsPool.ranking_page.exact_title')}
            </Typography>
          </View>
          {ranking.exactResults != null && (
            <Typography variant="l" weight="semiBold">
              {ranking.exactResults}
            </Typography>
          )}
        </View>
      </View>
    </CardContainer>
  );
}