import { StyleSheet, Text, View } from 'react-native';
import { Colors } from '@/lib/colors';
import { FontSize, FontWeight, Radius, Spacing } from '@/lib/theme';
type Tone = 'neutral' | 'success' | 'error' | 'info' | 'warning' | 'primary';
interface BadgeProps {
label: string;
tone?: Tone;
/** Couleur personnalisée (ex. couleur d'une émotion) — prioritaire sur `tone`. */
color?: string;
uppercase?: boolean;
}
/** Pastille d'état DSFR, taille homogène. */
export default function Badge({ label, tone = 'neutral', color, uppercase = false }: BadgeProps) {
const palette = color ? { bg: hexWithAlpha(color, 0.14), text: darken(color) } : TONES[tone];
return (
{label}
);
}
const TONES: Record = {
neutral: { bg: Colors.gray[100], text: Colors.gray[600] },
success: { bg: Colors.successBg, text: Colors.success },
error: { bg: Colors.errorBg, text: Colors.error },
info: { bg: '#E8EDFF', text: Colors.info },
warning: { bg: '#FFE9C7', text: Colors.warning },
primary: { bg: '#E3E3FD', text: Colors.primary },
};
/** Ajoute un canal alpha (0–1) à une couleur hex #RRGGBB. */
function hexWithAlpha(hex: string, alpha: number): string {
const a = Math.round(alpha * 255).toString(16).padStart(2, '0');
return `${hex}${a}`;
}
/** Pour le texte sur fond teinté, on garde la couleur d'origine (lisible sur 14% d'alpha). */
function darken(hex: string): string {
return hex;
}
const styles = StyleSheet.create({
badge: {
alignSelf: 'flex-start',
paddingHorizontal: Spacing.sm,
paddingVertical: 3,
borderRadius: Radius.sm,
},
text: { fontSize: FontSize.tiny, fontWeight: FontWeight.bold },
uppercase: { textTransform: 'uppercase', letterSpacing: 0.5 },
});