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

import {styles} from './styles';

export function GoalsListSK() {
  const {theme, spacing} = useTheme();

  return (
    <Skeleton
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.default},
      ]}>
      {Array.from(Array(4).keys()).map(item => (
        <CardContainer key={item}>
          <View style={styles.row}>
            <Skeleton.Item
              width={spacing.x5}
              height={spacing.x5}
              style={styles.image}
            />
            <View style={styles.rightContent}>
              <Skeleton.Item height={spacing.x3} />
              <Skeleton.Item height={spacing.x2} />
            </View>
          </View>
          <View style={styles.progressContainer}>
            <Skeleton.Item height={spacing.x1} />
          </View>
        </CardContainer>
      ))}
    </Skeleton>
  );
}