import React from 'react';
import { View, Text, StyleSheet, ViewStyle } from 'react-native';
import { colors, spacing, typography, borderRadius } from '../lib/theme';

export interface BadgeProps {
  children: React.ReactNode;
  variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
  size?: 'sm' | 'md';
  style?: ViewStyle;
}

export const Badge: React.FC<BadgeProps> = ({
  children,
  variant = 'default',
  size = 'md',
  style,
}) => {
  return (
    <View style={[styles.base, styles[variant], styles[`size_${size}`], style]}>
      <Text style={[styles.text, styles[`text_${size}`]]}>
        {children}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  base: {
    borderRadius: borderRadius.full,
    borderWidth: 2,
    alignSelf: 'flex-start',
  },
  default: {
    backgroundColor: colors.primaryLight,
    borderColor: colors.primary,
  },
  success: {
    backgroundColor: colors.successLight,
    borderColor: colors.success,
  },
  warning: {
    backgroundColor: colors.primaryLight,
    borderColor: colors.warning,
  },
  error: {
    backgroundColor: '#FEE2E2',
    borderColor: colors.error,
  },
  info: {
    backgroundColor: colors.primaryLight,
    borderColor: colors.info,
  },
  size_sm: {
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.xs,
  },
  size_md: {
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.xs,
  },
  text: {
    fontWeight: typography.fontWeight.bold,
    color: colors.text,
    letterSpacing: 0.5,
    textTransform: 'uppercase',
  },
  text_sm: {
    fontSize: typography.fontSize.xs,
  },
  text_md: {
    fontSize: typography.fontSize.xs,
  },
});
