import React from 'react';
import {View} from 'react-native';
import {CardContainer, Skeleton} from '@components';

import {styles} from './styles';

export function StatsCardSkeleton() {
  return (
    <CardContainer>
      <Skeleton>
        <View style={styles.container}>
          <View style={styles.statBlock}>
            <Skeleton.Item width={40} height={40} rounded />
            <View style={styles.statText}>
              <Skeleton.Item width={80} height={16} />
              <Skeleton.Item width={60} height={22} />
            </View>
            <Skeleton.Item width={24} height={32} />
          </View>
          <Skeleton.Item width={1} height={40} />
          <View style={styles.statBlock}>
            <Skeleton.Item width={40} height={40} rounded />
            <View style={styles.statText}>
              <Skeleton.Item width={80} height={16} />
              <Skeleton.Item width={60} height={22} />
            </View>
            <Skeleton.Item width={24} height={32} />
          </View>
        </View>
      </Skeleton>
    </CardContainer>
  );
}