asios/app/lottery/components/TransCard.tsx

import { Image } from 'expo-image';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import { Images } from '@/constants/images';

interface TransCardProps {
  item: any;
  width?: number;
  height?: number;
  fill?: number;
  imageWidth?: number;
  imageHeight?: number;
}

const LEVEL_MAP: any = {
  A: { bg: Images.box.detail.levelA, productItem: Images.box.detail.productItemA },
  B: { bg: Images.box.detail.levelB, productItem: Images.box.detail.productItemB },
  C: { bg: Images.box.detail.levelC, productItem: Images.box.detail.productItemC },
  D: { bg: Images.box.detail.levelD, productItem: Images.box.detail.productItemD },
};

export default function TransCard({
  item,
  width = 67,
  height = 90,
  fill = 2,
  imageWidth = 55,
  imageHeight = 70,
}: TransCardProps) {
  const itemWidth = width + fill * 2;
  const levelConfig = LEVEL_MAP[item.level] || LEVEL_MAP.D;

  return (
    <View style={[styles.item, { width: itemWidth, height: height }]}>
      <Image
        source={{ uri: levelConfig.bg }}
        style={[styles.super, { width: width /*, left: fill */ }]}
        contentFit="fill"
      />
      {item.isWinner && (
        <View style={{position:'absolute', top: 5, left: 5, zIndex: 100, backgroundColor:'red', padding: 2}}>
          <Text style={{color:'white', fontSize: 10, fontWeight:'bold'}}>WINNER</Text>
        </View>
      )}
      <Image
        source={{ uri: item.cover }}
        style={[styles.image, { width: imageWidth, height: imageHeight }]}
        contentFit="contain"
      />
      <Image
        source={{ uri: levelConfig.productItem }}
        style={styles.itemBottom}
        contentFit="fill"
      />
      
      <View style={styles.nameContainer}>
          <Text style={styles.nameText} numberOfLines={1}>
            {item.name}
          </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  item: {
    position: 'relative',
    justifyContent: 'center',
    alignItems: 'center',
  },
  super: {
    position: 'absolute',
    top: 0,
    height: '100%',
  },
  image: {
    zIndex: 1,
  },
  itemBottom: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    width: '100%',
    height: 20, 
    zIndex: 10,
  },
  nameContainer: {
      position: 'absolute',
      top: 8, // Moved to top as requested
      left: 0,
      width: '100%',
      alignItems: 'center',
      paddingHorizontal: 2,
      zIndex: 20,
  },
  nameText: {
      color: '#fff',
      fontSize: 8,
      textAlign: 'center',
      textShadowColor: 'rgba(0,0,0,0.8)',
      textShadowOffset: { width: 1, height: 1 },
      textShadowRadius: 1,
      fontWeight: 'bold',
  }
});