import React from 'react';
import { StyleSheet, ViewProps } from 'react-native';
import ThemedText from '@/components/theme/default/ThemedText';
import ThemedView from '@/components/theme/default/ThemedView';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

type ThemedBadgeProps = ViewProps & {
  value: number | string;
  size?: number;
  color?: string;
  textColor?: string;
};

const ThemedBadge: React.FC<ThemedBadgeProps> = ({
  value,
  size = 24,
  color,
  textColor,
  style,
  ...restProps
}) => {
  const scheme = useColorScheme() ?? 'dark';
  const badgeColor = color || Colors[scheme].tint;
  const badgeTextColor = textColor || Colors[scheme].background;

  return (
    <ThemedView
      style={[
        styles.badge,
        {
          width: size,
          height: size,
          borderRadius: size / 2,
          backgroundColor: badgeColor,
        },
        style,
      ]}
      {...restProps}
    >
      <ThemedText style={[styles.text, { color: badgeTextColor, fontSize: size * 0.5 }]}>
        {value}
      </ThemedText>
    </ThemedView>
  );
};

const styles = StyleSheet.create({
  badge: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontWeight: 'bold',
  },
});

export default ThemedBadge;