import React from 'react';
import { Text, View } from 'react-native';
import { CheckCircle2, Coins } from 'lucide-react-native';

import { themedColor } from '../../theme';
import { toolWidgetStyles } from '../primitives/toolWidgetStyles';

/**
 * Shared pieces of the automation and workflow task cards — the web
 * CreateAutomationWidget / CreateWorkflowWidget badge and footer rows.
 */

export function ActiveBadge({ inactiveLabel = 'Paused', isActive }: { inactiveLabel?: string; isActive: boolean }) {
  if (!isActive) {
    return (
      <View style={toolWidgetStyles.statusBadge}>
        <Text style={toolWidgetStyles.statusBadgeText}>{inactiveLabel}</Text>
      </View>
    );
  }
  return (
    <View style={[toolWidgetStyles.statusBadge, toolWidgetStyles.statusBadgeActive]}>
      <CheckCircle2 color={themedColor('#86EFAC')} size={11} strokeWidth={2.3} />
      <Text style={toolWidgetStyles.statusBadgeActiveText}>Active</Text>
    </View>
  );
}

export function AutomationCardFooter({ agentName }: { agentName?: string }) {
  return (
    <View style={toolWidgetStyles.cardFooterRow}>
      <View style={toolWidgetStyles.footerPill}>
        <Text numberOfLines={1} style={toolWidgetStyles.footerPillText}>
          {agentName ? `${agentName} responds when triggered` : 'Agent responds when triggered'}
        </Text>
      </View>
      <View style={toolWidgetStyles.footerPill}>
        <Coins color={themedColor('#A1A1AA')} size={11} strokeWidth={2.3} />
        <Text style={toolWidgetStyles.footerPillText}>Consumes message credits</Text>
      </View>
    </View>
  );
}