import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {SafeAreaView} from 'react-native-safe-area-context';
import {BackButton, HeaderSection} from '@components';
import {Navigation} from '@interfaces/navigation';
import {RankingTab} from '@modules/prodev2/components/RankingTab';
import {Screens} from '@shared/constants';
import {commonStyles} from '@shared/styles';
import {useTheme} from '@shared/theme';

export default function Ranking({
  route: {
    params: {competitionId},
  },
}: Navigation<Screens.PRODEV2_RANKING>) {
  const {t} = useTranslation();
  const {theme} = useTheme();

  return (
    <SafeAreaView
      edges={['top']}
      style={[
        commonStyles.flex,
        {backgroundColor: theme.background.layout.default},
      ]}>
      <HeaderSection
        leftComponent={<BackButton />}
        title={t('sportsPool.ranking.title')}
      />
      <View style={commonStyles.flex}>
        <RankingTab competitionId={competitionId} />
      </View>
    </SafeAreaView>
  );
}