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

function ProfileSkeleton() {
  return (
    <View style={styles.container}>
      <View style={styles.avatar}>
        <Skeleton
          LinearGradientComponent={LinearGradient}
          animation="wave"
          circle={true}
          width={110 * SIZES.WIDTH_RATE}
          height={110 * SIZES.WIDTH_RATE}
        />
        <Skeleton
          LinearGradientComponent={LinearGradient}
          animation="wave"
          width={160 * SIZES.WIDTH_RATE}
          height={30 * SIZES.WIDTH_RATE}
          style={{
            marginTop: 16 * SIZES.WIDTH_RATE,
            borderRadius: 10 * SIZES.WIDTH_RATE,
          }}
        />
      </View>
      <View style={styles.listView}>
        <View style={styles.category}>
          <Skeleton
            LinearGradientComponent={LinearGradient}
            animation="wave"
            width={90 * SIZES.WIDTH_RATE}
            height={40 * SIZES.WIDTH_RATE}
            style={{ borderRadius: 10 * SIZES.WIDTH_RATE }}
          />
          <Skeleton
            LinearGradientComponent={LinearGradient}
            animation="wave"
            width={90 * SIZES.WIDTH_RATE}
            height={40 * SIZES.WIDTH_RATE}
            style={{
              marginLeft: 12 * SIZES.WIDTH_RATE,
              borderRadius: 10 * SIZES.WIDTH_RATE,
            }}
          />
        </View>
        <ListItemTypeTwo count={2} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    width: SIZES.SCREEN_WIDTH,
    height: SIZES.SCREEN_HEIGHT,
    paddingHorizontal: 20 * SIZES.WIDTH_RATE,
    paddingVertical: 20 * SIZES.WIDTH_RATE,
    backgroundColor: COLORS.GRAY0,
  },
  avatar: {
    alignItems: 'center',
  },
  listView: {
    marginTop: 80 * SIZES.WIDTH_RATE,
  },
  category: {
    flexDirection: 'row',
  },
});

export default ProfileSkeleton;
