import { View, Text } from "react-native";
import { useTheme } from "../theme";

interface BadgeProps {
  label: string;
  variant?: "default" | "primary" | "success" | "error" | "warning";
  size?: "sm" | "md";
}

export function Badge({ label, variant = "default", size = "md" }: BadgeProps) {
  const theme = useTheme();

  const styles = {
    default: { bg: theme.colors.surfaceAlt, text: theme.colors.textSecondary, border: theme.colors.borderLight },
    primary: { bg: theme.colors.primaryLight, text: theme.colors.primaryDark, border: theme.colors.primaryLight },
    success: { bg: theme.colors.successLight, text: theme.colors.success, border: theme.colors.successLight },
    error: { bg: theme.colors.errorLight, text: theme.colors.error, border: theme.colors.errorLight },
    warning: { bg: theme.colors.starLight, text: "#92400E", border: theme.colors.starLight },
  };

  const { bg, text: textColor, border } = styles[variant];
  const isSmall = size === "sm";

  return (
    <View
      accessible
      accessibilityLabel={label}
      style={{
        backgroundColor: bg,
        paddingHorizontal: isSmall ? 6 : 10,
        paddingVertical: isSmall ? 3 : 5,
        borderRadius: theme.radius.sm,
        borderWidth: 1,
        borderColor: border,
        alignSelf: "flex-start",
      }}
    >
      <Text style={{ color: textColor, fontSize: isSmall ? 11 : 12, fontWeight: "600", letterSpacing: 0.2 }}>
        {label}
      </Text>
    </View>
  );
}