import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { radius, spacing, typography } from '../../../theme';
import { ActionStatus } from '../types/actions.types';
import { getActionStatusMeta } from '../utils/actions.utils';

type ActionStatusBadgeProps = {
  status: ActionStatus;
};

const ActionStatusBadge = ({ status }: ActionStatusBadgeProps) => {
  const meta = getActionStatusMeta(status);

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

export default ActionStatusBadge;

const styles = StyleSheet.create({
  badge: {
    paddingHorizontal: spacing.sm,
    paddingVertical: 4,
    borderRadius: radius.md,
  },
  text: {
    fontSize: typography.fontSize.xs,
    fontWeight: typography.fontWeight.semibold,
  },
});