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

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

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

  const variants = {
    default: { bg: theme.colors.surface, text: theme.colors.textSecondary },
    primary: { bg: theme.colors.primaryLight, text: theme.colors.primary },
    success: { bg: "#D1FAE5", text: "#059669" },
    error: { bg: theme.colors.errorLight, text: theme.colors.error },
  };

  const { bg, text: textColor } = variants[variant];

  return (
    <View style={{ backgroundColor: bg, paddingHorizontal: 8, paddingVertical: 4, borderRadius: theme.radius.sm }}>
      <Text style={{ color: textColor, fontSize: 12, fontWeight: "600" }}>{label}</Text>
    </View>
  );
}