import cc from 'classcat';
import { Box } from 'components/common';

export function getStatusColor(status: string) {
  status = status.toLowerCase();
  if (~status.indexOf('error')) return 'orange';
  if (~status.indexOf('failed')) return 'red';
  return '';
}

interface StatusBadgeProps extends React.ComponentProps<typeof Box> {
  status: string;
}

export const StatusBadge = ({
  status,
  className,
  ...props
}: StatusBadgeProps) => {
  const color = getStatusColor(status) || 'blue';
  return (
    <Box
      className={cc(['ttc truncate', className, `mark--${color}`])}
      paddingX={3}
      {...props}
    >
      {status.endsWith('ing') ? status + '...' : status}
    </Box>
  );
};