import React, {memo} from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {useTheme} from '@shared/theme';
import {Skeleton} from '@components/_HuGo/Skeleton';

import {styles} from './styles';

interface Props {
  style?: StyleProp<ViewStyle>;
  withDescription?: boolean;
}
function ListItemSkeletonComponent({withDescription, style}: Props) {
  const {spacing} = useTheme();

  return (
    <View style={[styles.row, style]}>
      <Skeleton.Item width={spacing.x5} height={spacing.x5} rounded />
      <View style={styles.rightContent}>
        <Skeleton.Item width="100%" height={spacing.x3} />
        {withDescription && (
          <Skeleton.Item width="30%" height={spacing['x1.5']} />
        )}
      </View>
    </View>
  );
}

export const ListItemSkeleton = memo(ListItemSkeletonComponent);
