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

interface PillBadgeProps {
  label: string;
  color: string;
  bgColor: string;
  borderColor?: string;
  size?: 'sm' | 'md';
}

export default function PillBadge({ label, color, bgColor, borderColor, size = 'sm' }: PillBadgeProps) {
  return (
    <View style={[
      styles.pill,
      {
        backgroundColor: bgColor,
        borderColor: borderColor || bgColor,
      },
      size === 'md' && styles.pillMd,
    ]}>
      <Text style={[
        styles.text,
        { color },
        size === 'md' && styles.textMd,
      ]}>
        {label}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  pill: {
    paddingHorizontal: 8,
    paddingVertical: 3,
    borderRadius: 6,
    borderWidth: 1,
    alignSelf: 'flex-start',
  },
  pillMd: {
    paddingHorizontal: 12,
    paddingVertical: 5,
    borderRadius: 8,
  },
  text: {
    fontFamily: Fonts.inter.black,
    fontSize: FontSize.micro,
    textTransform: 'uppercase',
    letterSpacing: 1,
  },
  textMd: {
    fontSize: FontSize.badge,
  },
});