/** Small badges: level, VIP, category chips, gold coins pill. */
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {COLORS} from '../theme/colors';

type Variant = 'level' | 'vip' | 'chip' | 'gold' | 'green' | 'danger';

interface Props {
  text: string;
  variant?: Variant;
  small?: boolean;
}

const BG: Record<Variant, string> = {
  level: COLORS.violet,
  vip: COLORS.goldDeep,
  chip: 'rgba(139,69,255,0.18)',
  gold: COLORS.goldDeep,
  green: COLORS.success,
  danger: COLORS.danger,
};

const FG: Record<Variant, string> = {
  level: COLORS.white,
  vip: COLORS.white,
  chip: COLORS.purple,
  gold: COLORS.white,
  green: COLORS.white,
  danger: COLORS.white,
};

export function Badge({text, variant = 'level', small}: Props): React.JSX.Element {
  return (
    <View style={[styles.badge, {backgroundColor: BG[variant]}, small && styles.small]}>
      <Text style={[styles.text, {color: FG[variant]}, small && styles.smallText]} numberOfLines={1}>
        {text}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  badge: {
    borderRadius: 99,
    paddingHorizontal: 8,
    paddingVertical: 3,
    alignSelf: 'flex-start',
  },
  small: {paddingHorizontal: 6, paddingVertical: 2},
  text: {fontSize: 10, fontWeight: '700'},
  smallText: {fontSize: 9},
});