path: root/apps/mobile/components/TaskStatusBadge.tsx

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { TaskStatusColors } from '../constants/Colors';
import type { TaskStatus } from '../lib/api';

interface TaskStatusBadgeProps {
  status: TaskStatus;
  showLabel?: boolean;
  size?: 'small' | 'medium' | 'large';
}

const statusLabels: Record<TaskStatus, string> = {
  pending: 'Pending',
  initializing: 'Initializing',
  starting: 'Starting',
  running: 'Running',
  paused: 'Paused',
  blocked: 'Blocked',
  done: 'Done',
  failed: 'Failed',
  merged: 'Merged',
};

export function TaskStatusBadge({
  status,
  showLabel = false,
  size = 'medium',
}: TaskStatusBadgeProps) {
  const colors = TaskStatusColors[status] || TaskStatusColors.pending;

  const dotSize = {
    small: 8,
    medium: 10,
    large: 12,
  }[size];

  const fontSize = {
    small: 10,
    medium: 12,
    large: 14,
  }[size];

  const paddingHorizontal = {
    small: 6,
    medium: 8,
    large: 10,
  }[size];

  const paddingVertical = {
    small: 2,
    medium: 4,
    large: 6,
  }[size];

  if (showLabel) {
    return (
      <View
        style={[
          styles.badge,
          {
            backgroundColor: colors.bg,
            paddingHorizontal,
            paddingVertical,
          },
        ]}
      >
        <View
          style={[
            styles.dot,
            {
              backgroundColor: colors.dot,
              width: dotSize,
              height: dotSize,
            },
          ]}
        />
        <Text style={[styles.label, { color: colors.text, fontSize }]}>
          {statusLabels[status]}
        </Text>
      </View>
    );
  }

  return (
    <View
      style={[
        styles.dot,
        {
          backgroundColor: colors.dot,
          width: dotSize,
          height: dotSize,
        },
      ]}
    />
  );
}

const styles = StyleSheet.create({
  badge: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 999,
    gap: 6,
  },
  dot: {
    borderRadius: 999,
  },
  label: {
    fontWeight: '500',
  },
});