import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Colors, Radius, FontSize, Spacing } from '@/constants/theme';

type BadgeVariant = 'pending' | 'approved' | 'rejected' | 'paid' | 'unpaid' | 'overdue' | 'info' | 'leave_requested' | 'left';

const variantColors: Record<BadgeVariant, { bg: string; text: string }> = {
  pending:        { bg: '#FEF3C7', text: '#92400E' },
  approved:       { bg: '#D1FAE5', text: '#065F46' },
  rejected:       { bg: '#FEE2E2', text: '#991B1B' },
  paid:           { bg: '#D1FAE5', text: '#065F46' },
  unpaid:         { bg: '#FEE2E2', text: '#991B1B' },
  overdue:        { bg: '#FEE2E2', text: '#7F1D1D' },
  info:           { bg: '#DBEAFE', text: '#1E40AF' },
  leave_requested:{ bg: '#FEE0B2', text: '#92400E' },
  left:           { bg: '#E5E7EB', text: '#374151' },
};

interface BadgeProps {
  label: string;
  variant: BadgeVariant;
}

export function Badge({ label, variant }: BadgeProps) {
  const colors = variantColors[variant] ?? { bg: '#E5E7EB', text: '#374151' };
  return (
    <View style={[styles.badge, { backgroundColor: colors.bg }]}>
      <Text style={[styles.text, { color: colors.text }]}>{label}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  badge: {
    paddingHorizontal: Spacing.sm,
    paddingVertical: 2,
    borderRadius: Radius.full,
    alignSelf: 'flex-start',
  },
  text: { fontSize: FontSize.xs, fontWeight: '600', textTransform: 'capitalize' },
});