import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { Skeleton } from '@rneui/themed';
import { SIZES } from '../../common';

interface ListItemTypeTwoProps {
  count: number;
}

function ListItemTypeTwo({ count = 2 }: ListItemTypeTwoProps) {
  const [items, _] = useState(new Array(count).fill(null));

  return (
    <>
      {items.map((_, index) => (
        <View key={index + 1} style={styles.listItem}>
          <View style={styles.itemTop}>
            <Skeleton
              LinearGradientComponent={LinearGradient}
              animation="wave"
              width={90 * SIZES.WIDTH_RATE}
              height={120 * SIZES.WIDTH_RATE}
              style={{ borderRadius: 20 * SIZES.WIDTH_RATE }}
            />
            <View
              style={{
                marginLeft: 12 * SIZES.WIDTH_RATE,
                justifyContent: 'center',
              }}
            >
              <Skeleton
                LinearGradientComponent={LinearGradient}
                animation="wave"
                width={220 * SIZES.WIDTH_RATE}
                height={20 * SIZES.WIDTH_RATE}
                style={{ borderRadius: 10 * SIZES.WIDTH_RATE }}
              />
              <Skeleton
                LinearGradientComponent={LinearGradient}
                animation="wave"
                width={160 * SIZES.WIDTH_RATE}
                height={20 * SIZES.WIDTH_RATE}
                style={{
                  marginTop: 8 * SIZES.WIDTH_RATE,
                  borderRadius: 10 * SIZES.WIDTH_RATE,
                }}
              />
              <Skeleton
                LinearGradientComponent={LinearGradient}
                animation="wave"
                width={80 * SIZES.WIDTH_RATE}
                height={20 * SIZES.WIDTH_RATE}
                style={{
                  marginTop: 8 * SIZES.WIDTH_RATE,
                  borderRadius: 10 * SIZES.WIDTH_RATE,
                }}
              />
              <Skeleton
                LinearGradientComponent={LinearGradient}
                animation="wave"
                width={130 * SIZES.WIDTH_RATE}
                height={20 * SIZES.WIDTH_RATE}
                style={{
                  marginTop: 8 * SIZES.WIDTH_RATE,
                  borderRadius: 10 * SIZES.WIDTH_RATE,
                }}
              />
            </View>
          </View>
          <View style={styles.itemBottom}>
            <Skeleton
              LinearGradientComponent={LinearGradient}
              animation="wave"
              height={40 * SIZES.WIDTH_RATE}
              style={{ borderRadius: 10 * SIZES.WIDTH_RATE }}
            />
          </View>
        </View>
      ))}
    </>
  );
}

const styles = StyleSheet.create({
  listItem: {
    marginTop: 24 * SIZES.WIDTH_RATE,
  },
  itemTop: {
    flexDirection: 'row',
  },
  itemBottom: {
    marginTop: 10 * SIZES.WIDTH_RATE,
  },
});

export default ListItemTypeTwo;
