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

import {styles} from './styles';

interface Props {
  withAvatar?: boolean;
  withDescription?: boolean;
}

export function PerformanceListItemSK({
  withAvatar = true,
  withDescription = true,
}: Props) {
  const {spacing} = useTheme();

  return (
    <CardContainer>
      <Skeleton style={styles.row}>
        {withAvatar && (
          <Skeleton.Item
            width={spacing.x5}
            height={spacing.x5}
            style={styles.image}
          />
        )}
        <View style={styles.rightContent}>
          <Skeleton.Item height={spacing.x3} />
          {withDescription && <Skeleton.Item height={spacing.x2} />}
        </View>
      </Skeleton>
    </CardContainer>
  );
}