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

type BadgeVariant = 'primary' | 'secondary' | 'tertiary' | 'error' | 'success';

const variantClasses: Record<BadgeVariant, { bg: string; text: string }> = {
  primary: { bg: 'bg-primary-fixed', text: 'text-on-primary-fixed' },
  secondary: { bg: 'bg-secondary-container', text: 'text-on-secondary-container' },
  tertiary: { bg: 'bg-tertiary-fixed', text: 'text-on-tertiary-fixed' },
  error: { bg: 'bg-error-container', text: 'text-on-error-container' },
  success: { bg: 'bg-green-50', text: 'text-green-700' },
};

interface StatusBadgeProps {
  text: string;
  variant?: BadgeVariant;
}

/** 状态标签 — 圆角药丸形，通过 variant 控制配色 */
export function StatusBadge({ text, variant = 'secondary' }: StatusBadgeProps) {
  const v = variantClasses[variant];
  return (
    <View className={`px-2.5 py-1 rounded-full ${v.bg}`}>
      <Text className={`text-[10px] font-bold ${v.text}`}>{text}</Text>
    </View>
  );
}
