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

import { fonts, radii, spacing } from "@/constants/theme";
import { useAppTheme } from "@/contexts/ThemeContext";
import { getStatusColor, statusLabels, type InvoiceStatus } from "@/lib/invoice-status";

export function StatusBadge({ status }: { status: InvoiceStatus }) {
  const { isDark } = useAppTheme();
  const color = getStatusColor(status, isDark);

  return (
    <View style={[styles.badge, { backgroundColor: `${color}22` }]}>
      <Text style={[styles.text, { color }]}>{statusLabels[status]}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  badge: {
    height: 22,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: spacing.sm,
    borderRadius: radii.pill,
  },
  text: {
    fontSize: 10,
    fontFamily: fonts.bodyBold,
    textTransform: "uppercase",
    letterSpacing: 0.4,
    includeFontPadding: false,
  },
});