import { useTheme } from "../../theme";
import React from "react";
import {
  View,
  StyleSheet,
  StyleProp,
  ViewStyle,
  ImageStyle,
  Text,
  TextStyle,
} from "react-native";

// Badge props
export interface BadgeProps {
  icon: React.ReactNode;
  activeIcon?: React.ReactNode;

  isActive?: boolean;

  // Style customization
  size?: number;
  style?: StyleProp<ViewStyle>;
  activeStyle?: StyleProp<ViewStyle>;
  inactiveStyle?: StyleProp<ViewStyle>;

  label?: string;
  labelStyle?: StyleProp<TextStyle>;
}

// Simple Badge component
export const Badge: React.FC<BadgeProps> = ({
  icon,
  isActive = false,
  size,
  style,
  activeStyle,
  inactiveStyle,
  activeIcon,
  label,
  labelStyle,
}) => {
  const {theme} = useTheme();

  const styles = StyleSheet.create({
    badge: {
      borderRadius: 12,
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: theme.secondary,
      padding: 8,
    },
    activeBadge: {
      backgroundColor: theme.primary,
    },
    label: {
        fontSize: 12,
        color: theme.text,
        marginTop: 4,
        textAlign: "center",
        fontWeight: "500",
      },
  });

  const badgeStyles = [
    styles.badge,
    size ? { width: size, height: size } : {},
    style,
    isActive ? [styles.activeBadge, activeStyle] : inactiveStyle,
  ];

  return (
    <View style={{ alignItems: "center" }}>
      <View style={badgeStyles}>
        {isActive && activeIcon ? activeIcon : icon}
      </View>
      {label && <Text style={[styles.label, labelStyle]}>{label}</Text>}
    </View>
  );
};

export default Badge;