/**
 * 首页 NFT Group 卡片
 */
import React, { useState, useEffect } from 'react';
import { postRequest } from '@/netWork/index';
import { getStorageData, setStorageData } from '@/storage/index';
import { Alert, Image, StyleSheet, Text, View, Pressable } from 'react-native';

export const NftGroupCard = (props: any) => {
	const jumpDetail = (groupId: any) => {
		props.navigation.navigate('NftGroupDetail', {
			groupId,
			navigation: props.navigation,
		});
	};
	return (
		<View style={styles.groupCard}>
			{props.nftData.length > 0 && (
				<Text style={styles.title}>NFT Group</Text>
			)}
			<View style={styles.groupList}>
				{props.nftData.map(
					(item: {
						nftGroupId: any;
						nftGroupIcon: any;
						nftGroupName: String;
					}) => (
						<Pressable
							style={styles.groupItem}
							onPress={() => {
								jumpDetail(item.nftGroupId)
							}}
							key={item.nftGroupId}>
							<Image
								style={styles.groupIcon}
								source={{ uri: item.nftGroupIcon }}
							/>
							<Text style={styles.groupName}>
								{item.nftGroupName}
							</Text>
						</Pressable>
					),
				)}
			</View>
		</View>
	);
};

const styles = StyleSheet.create({
	groupCard: {
		flex: 1,
		paddingLeft: 16,
		paddingRight: 16,
	},
	groupList: {
		backgroundColor: '#fff',
		borderRadius: 10,
	},
	groupItem: {
		paddingTop: 12,
		paddingBottom: 12,
		paddingLeft: 20,
		paddingRight: 20,
		flexDirection: 'row',
	},
	title: {
		marginTop: 25,
		marginBottom: 8,
	},
	groupIcon: {
		width: 40,
		height: 40,
		borderRadius: 4,
		marginRight: 20,
	},
	groupName: {
		height: 30,
		lineHeight: 30,
		fontSize: 16,
	},
});