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>
  );
}

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: 40, 
    zIndex: 10,
  },
});