asios/components/award-detail-yfs/PurchaseBar.tsx

import React from 'react';
import {
    ImageBackground,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from 'react-native';

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

// Helper to determine background image based on type
const getBtnBg = (type: 'one' | 'five' | 'many') => {
    switch (type) {
        case 'one': return Images.common.butBgV;
        case 'five': return Images.common.butBgL;
        case 'many': return Images.common.butBgH;
        default: return Images.common.butBgV;
    }
};

interface PurchaseBarProps {
    price: number;
    specialPrice?: number;
    specialPriceFive?: number;
    onBuy: (count: number) => void;
    onBuyMany: () => void;
}

export default function PurchaseBar({ price, specialPrice, specialPriceFive, onBuy, onBuyMany }: PurchaseBarProps) {
    return (
        <ImageBackground 
            source={{ uri: Images.box.detail.boxDetailBott }} 
            style={styles.container}
            resizeMode="stretch"
        >
            <View style={styles.btnRow}>
                {/* Buy One */}
                <TouchableOpacity onPress={() => onBuy(1)} style={styles.btnWrapper}>
                    <ImageBackground source={{ uri: getBtnBg('one') }} style={styles.btnBg} resizeMode="stretch">
                        <Text style={styles.btnTitle}>购买一盒</Text>
                        <Text style={styles.btnPrice}>
                            (¥{specialPrice ?? price})
                        </Text>
                    </ImageBackground>
                </TouchableOpacity>

                {/* Buy Five */}
                <TouchableOpacity onPress={() => onBuy(5)} style={styles.btnWrapper}>
                    <ImageBackground source={{ uri: getBtnBg('five') }} style={styles.btnBg} resizeMode="stretch">
                        <Text style={styles.btnTitle}>购买五盒</Text>
                        <Text style={styles.btnPrice}>
                             (¥{specialPriceFive ?? price * 5})
                        </Text>
                    </ImageBackground>
                </TouchableOpacity>

                {/* Buy Many */}
                <TouchableOpacity onPress={onBuyMany} style={styles.btnWrapper}>
                    <ImageBackground source={{ uri: getBtnBg('many') }} style={styles.btnBg} resizeMode="stretch">
                        <Text style={styles.btnTitle}>购买多盒</Text>
                    </ImageBackground>
                </TouchableOpacity>
            </View>
        </ImageBackground>
    );
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: 100, // Adjust based on background aspect ratio
        justifyContent: 'center',
        paddingBottom: 20, // Safe area padding simulation
    },
    btnRow: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'center',
        paddingHorizontal: 10,
    },
    btnWrapper: {
        flex: 1,
        height: 50,
        marginHorizontal: 5,
    },
    btnBg: {
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
    },
    btnTitle: {
        color: '#fff',
        fontSize: 14,
        fontWeight: 'bold',
        textShadowColor: '#000',
        textShadowOffset: { width: 1, height: 1 },
        textShadowRadius: 1,
    },
    btnPrice: {
        color: '#fff',
        fontSize: 10,
        fontWeight: 'bold',
        textShadowColor: '#000',
        textShadowOffset: { width: 1, height: 1 },
        textShadowRadius: 1,
    }
});