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

type Props = {
  children: React.ReactNode;
  color?: 'amber' | 'slate' | 'green' | 'red' | 'blue' | 'indigo';
  variant?: 'solid' | 'soft';
  style?: ViewStyle;
};

const colorMap = {
  solid: {
    amber: { bg: '#f59e0b', text: '#fff' },
    slate: { bg: '#475569', text: '#fff' },
    green: { bg: '#10b981', text: '#fff' },
    red: { bg: '#ef4444', text: '#fff' },
    blue: { bg: '#3b82f6', text: '#fff' },
    indigo: { bg: '#6366f1', text: '#fff' },
  },
  soft: {
    amber: { bg: '#fef3c7', text: '#92400e' },
    slate: { bg: '#f1f5f9', text: '#475569' },
    green: { bg: '#d1fae5', text: '#065f46' },
    red: { bg: '#fee2e2', text: '#991b1b' },
    blue: { bg: '#dbeafe', text: '#1e40af' },
    indigo: { bg: '#e0e7ff', text: '#4338ca' },
  },
};

export const Badge = ({ children, color = 'indigo', variant = 'soft', style }: Props) => {
  const colors = colorMap[variant][color];

  return (
    <View style={[styles.badge, { backgroundColor: colors.bg }, style]}>
      <Text style={[styles.text, { color: colors.text }]}>{children}</Text>
    </View>
  );
};

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


