import { StyleSheet, Text, View } from '@react-pdf/renderer';

import { PDF_TOKENS } from './tokens';

export type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';

const toneStyles: Record<BadgeTone, { background: string; foreground: string }> = {
  neutral: { background: PDF_TOKENS.colors.border, foreground: PDF_TOKENS.colors.text },
  accent: { background: PDF_TOKENS.colors.accentBlue, foreground: '#ffffff' },
  success: { background: PDF_TOKENS.colors.success, foreground: '#ffffff' },
  warning: { background: PDF_TOKENS.colors.warning, foreground: '#ffffff' },
  danger: { background: PDF_TOKENS.colors.danger, foreground: '#ffffff' },
};

const styles = StyleSheet.create({
  pill: {
    paddingHorizontal: 8,
    paddingVertical: 3,
    borderRadius: 999,
    alignSelf: 'flex-start',
  },
  label: {
    fontFamily: PDF_TOKENS.fonts.sansBold,
    fontSize: PDF_TOKENS.sizes.caption,
    textTransform: 'uppercase',
    letterSpacing: 0.5,
  },
});

export interface BadgeProps {
  text: string;
  tone?: BadgeTone;
}

export function Badge({ text, tone = 'neutral' }: BadgeProps) {
  const t = toneStyles[tone];
  return (
    <View style={[styles.pill, { backgroundColor: t.background }]}>
      <Text style={[styles.label, { color: t.foreground }]}>{text}</Text>
    </View>
  );
}