import React, {useState} from 'react';
import {View, StyleSheet, ViewStyle, Text} from 'react-native';
import Icon from './icon';
import {$Colors} from './style';

export type PriceTagProps = {
    discount: number;
    style?: ViewStyle;
};

const PriceTag: React.FC<PriceTagProps> = ({discount, style}) => {
    return (
        <View style={[styles.wrapper, style]}>
            <Icon name="tag" style={styles.tag} />
            <Text style={styles.discount} numberOfLines={1}>
                {discount > 100 ? 99 : discount}折
            </Text>
        </View>
    );
};
export default PriceTag;

const styles = StyleSheet.create({
    wrapper: {
        height: 18,
        width: 45,
        position: 'relative',
    },
    discount: {
        fontSize: 12,
        paddingLeft: 10,
        lineHeight: 18,
        textAlign: 'center',
        color: $Colors.third,
        zIndex: 1,
    },
    tag: {
        fontSize: 18,
        position: 'absolute',
        color: '#FFF2EC',
        left: 0,
        top: 0,
        zIndex: 0,
    },
});