import React from 'react';
import { View, Text, StyleSheet, ViewStyle } from 'react-native';
import { colors, radius } from '../../lib/theme';

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

const colorMap = {
  solid: {
    amber: { bg: colors.primary, text: colors.textInverse },
    slate: { bg: colors.surfaceDark, text: colors.textInverse },
    green: { bg: colors.success, text: colors.textInverse },
    red: { bg: colors.danger, text: colors.textInverse },
    blue: { bg: colors.primary, text: colors.textInverse },
    indigo: { bg: colors.primary, text: colors.textInverse },
  },
  soft: {
    amber: { bg: colors.primarySoft, text: colors.primaryDark },
    slate: { bg: colors.backgroundAlt, text: colors.textSoft },
    green: { bg: colors.successSoft, text: '#166534' },
    red: { bg: colors.dangerSoft, text: '#991b1b' },
    blue: { bg: colors.primarySoft, text: colors.primaryDark },
    indigo: { bg: colors.primarySoft, text: colors.primaryDark },
  },
};

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

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

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