import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconTrendingUp} 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 UserPositionCard({ranking}: Props) {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();

  return (
    <CardContainer>
      <View style={styles.container}>
        <View style={styles.left}>
          <View
            style={[
              styles.iconCircle,
              {backgroundColor: theme.background.elements.brand},
            ]}>
            <IconTrendingUp
              size={iconSizes.x6}
              color={theme.text.neutral.brand}
            />
          </View>
          <Typography variant="s" weight="semiBold">
            {t('sportsPool.ranking.position', {
              position: ranking.position ?? '-',
            })}
          </Typography>
        </View>
        <View style={[styles.stack, styles.right]}>
          <Typography variant="xs" color={theme.text.neutral.lighter}>
            {t('sportsPool.ranking_page.points_header')}
          </Typography>
          <Typography
            variant="m"
            weight="semiBold"
            color={theme.text.neutral.brand}>
            {ranking.totalPoints ?? '-'}
          </Typography>
        </View>
      </View>
    </CardContainer>
  );
}