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

import {styles} from './styles';

interface Props {
  rows?: number;
}

export function TeamRowSkeleton({rows = 10}: Props) {
  const {theme} = useTheme();

  return (
    <Skeleton>
      {Array.from({length: rows}).map((_, i) => (
        <View
          key={`team-row-skeleton-${i}`}
          style={[
            styles.row,
            {borderBottomColor: theme.border.neutral.default},
          ]}>
          <View style={styles.left}>
            <Skeleton.Item width={40} height={40} rounded />
            <Skeleton.Item width={120} height={22} />
          </View>
          <Skeleton.Item width={40} height={40} />
        </View>
      ))}
    </Skeleton>
  );
}