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

const COLORS: Record<string, { bg: string; text: string }> = {
  draft: { bg: '#F3F4F6', text: '#6B7280' },
  open: { bg: '#D1FAE5', text: '#065F46' },
  closed: { bg: '#FEE2E2', text: '#991B1B' },
  completed: { bg: '#EDE9FE', text: '#5B21B6' },
  submitted: { bg: '#FEF3C7', text: '#92400E' },
  accepted: { bg: '#D1FAE5', text: '#065F46' },
  rejected: { bg: '#FEE2E2', text: '#991B1B' },
  waitlisted: { bg: '#DBEAFE', text: '#1E40AF' },
};

interface Props {
  status: string;
}

export function StatusBadge({ status }: Props) {
  const colors = COLORS[status] ?? { bg: '#F3F4F6', text: '#374151' };
  return (
    <View style={[styles.badge, { backgroundColor: colors.bg }]}>
      <Text style={[styles.text, { color: colors.text }]}>{status.toUpperCase()}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  badge: { borderRadius: 12, paddingHorizontal: 10, paddingVertical: 4, alignSelf: 'flex-start' },
  text: { fontSize: 11, fontWeight: '700', letterSpacing: 0.5 },
});