'use client';

import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';

interface ActionStatusBadgeProps {
  status: 'PENDING' | 'COMPLETED' | 'FAILED' | 'IN_PROGRESS';
}

export function ActionStatusBadge({ status }: ActionStatusBadgeProps) {
  const styles = {
    PENDING: { bg: 'bg-amber-500/10', text: 'text-[#FFBE4D]', border: 'border-amber-500/20' },
    COMPLETED: { bg: 'bg-emerald-500/10', text: 'text-emerald-400', border: 'border-emerald-500/20' },
    FAILED: { bg: 'bg-red-500/10', text: 'text-red-400', border: 'border-red-500/30' },
    IN_PROGRESS: { bg: 'bg-blue-500/10', text: 'text-[#198CFF]', border: 'border-blue-500/20' },
  };

  const config = styles[status];

  return (
    <Box 
      as="span" 
      px={2} 
      py={0.5} 
      rounded="sm" 
      bg={config.bg} 
      border 
      borderColor={config.border}
      display="inline-block"
    >
      <Text 
        size="xs" 
        weight="bold" 
        color={config.text} 
        uppercase 
        letterSpacing="tight"
        fontSize="10px"
      >
        {status.replace('_', ' ')}
      </Text>
    </Box>
  );
}