import { View, Text, StyleSheet } from 'react-native'

const BADGE_CONFIG: Record<string, { bg: string; color: string }> = {
  Wichtig:       { bg: '#FEE2E2', color: '#B91C1C' },
  Pruefung:      { bg: '#DBEAFE', color: '#1D4ED8' },
  Foerderung:    { bg: '#DCFCE7', color: '#15803D' },
  Veranstaltung: { bg: '#E0E7FF', color: '#4338CA' },
  Allgemein:     { bg: '#F1F5F9', color: '#475569' },
  Versammlung:   { bg: '#E0E7FF', color: '#4338CA' },
  Kurs:          { bg: '#DCFCE7', color: '#15803D' },
  Event:         { bg: '#FEF3C7', color: '#B45309' },
  Sonstiges:     { bg: '#F1F5F9', color: '#475569' },
}

interface BadgeProps {
  label: string
  kategorie?: string
  typ?: string
}

export function Badge({ label, kategorie, typ }: BadgeProps) {
  const cfg =
    (kategorie && BADGE_CONFIG[kategorie]) ||
    (typ && BADGE_CONFIG[typ]) ||
    { bg: '#F1F5F9', color: '#475569' }

  return (
    <View style={[styles.pill, { backgroundColor: cfg.bg }]}>
      <Text style={[styles.label, { color: cfg.color }]}>{label}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  pill: {
    alignSelf: 'flex-start',
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 99,
  },
  label: {
    fontSize: 11,
    fontWeight: '700',
    letterSpacing: 0.2,
  },
})