import React from 'react';
import {View} from 'react-native';
import {Divider, Skeleton} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface SkeletonProps {
  isLast?: boolean;
}

export function RankingRowSkeleton({isLast}: SkeletonProps) {
  const {theme} = useTheme();

  return (
    <View
      style={[
        styles.rowContainer,
        isLast && styles.rowContainerLast,
        {borderColor: theme.border.neutral.default},
      ]}>
      <Skeleton>
        <View style={styles.row}>
          <Skeleton.Item width={16} height={16} rounded />
          <Skeleton.Item width={16} height={20} />
          <View style={styles.userContainer}>
            <Skeleton.Item width={32} height={32} rounded />
            <Skeleton.Item width={120} height={20} />
          </View>
          <Skeleton.Item width={32} height={22} />
        </View>
      </Skeleton>
      {!isLast && <Divider />}
    </View>
  );
}

interface TableSkeletonProps {
  rows?: number;
}

export function RankingTableSkeleton({rows = 8}: TableSkeletonProps) {
  return (
    <View>
      {Array.from({length: rows}).map((_, index) => (
        <RankingRowSkeleton
          key={`ranking-row-skeleton-${index}`}
          isLast={index === rows - 1}
        />
      ))}
    </View>
  );
}