import React from 'react';
import { withTheme } from '../../branding';
import type { ViewStyle, TextStyle } from 'react-native';
import { Text, View } from 'react-native';
import useHasFeature from '../../hooks/auth/useHasFeature';
import { MOBILE_ORDER_LABEL } from '../../constants/features';
import styles from './styles';
import type { ThemeModeType } from '../BrandFilters/BrandFilters.tsx';

interface OrderLabelProps {
    label?: number | string;
    containerStyle?: ViewStyle | ViewStyle[];
    labelStyle?: TextStyle | TextStyle[];
    theme: ThemeModeType;
}

export const OrderLabel = ({
    label,
    containerStyle = {},
    labelStyle = {},
    theme
}: OrderLabelProps) => {
    const themeStyles = styles[theme];
    const hasOrderLabel = useHasFeature(MOBILE_ORDER_LABEL);

    if (!label || !hasOrderLabel) {
        return null;
    }

    return (
        <View
            testID="orderLabel"
            style={[themeStyles.container, containerStyle]}
        >
            <Text style={[themeStyles.text, labelStyle]}>{label}</Text>
        </View>
    );
};

export default withTheme(OrderLabel);