import React from 'react';
import {StyleSheet, Text, View, ViewStyle} from 'react-native';
import {colors, typography} from '../../utils/colors';

interface Props {
  label: string;
  variant?: 'primary' | 'success' | 'warning' | 'error' | 'info' | 'muted';
  style?: ViewStyle;
}

const variantColors: Record<NonNullable<Props['variant']>, string> = {
  primary: colors.primary,
  success: colors.success,
  warning: colors.warning,
  error: colors.error,
  info: colors.info,
  muted: colors.surfaceHighlight,
};

export default function Badge({label, variant = 'muted', style}: Props) {
  return (
    <View style={[styles.badge, {backgroundColor: variantColors[variant]}, style]}>
      <Text style={styles.text}>{label}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  badge: {
    paddingHorizontal: 7,
    paddingVertical: 3,
    borderRadius: 4,
  },
  text: {
    ...typography.badge,
    color: colors.textPrimary,
  },
});