import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

import { useTheme } from '../theme/context';

interface BadgeProps {
  label: string;
  value?: string;
  color?: string; // Optional override
}

export function StatBadge({ label, value, color }: BadgeProps) {
  const theme = useTheme();
  const accentColor = color || theme.colors.primary;

  return (
    <View
      style={[
        styles.container,
        {
          backgroundColor: `${accentColor}1A`, // 10% opacity
          borderColor: `${accentColor}33`, // 20% opacity
          borderRadius: theme.borderRadius.m,
        },
      ]}
    >
      <Text style={[styles.label, { color: theme.colors.text.secondary }]}>{label}</Text>
      {value && <Text style={[styles.value, { color: accentColor }]}>{value}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingVertical: 6,
    paddingHorizontal: 10,
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  label: {
    fontSize: 10,
    textTransform: 'uppercase',
    letterSpacing: 0.5,
    marginBottom: 2,
  },
  value: {
    fontSize: 14,
    fontWeight: '700',
  },
});