import React from 'react';
import { View } from 'react-native';
import { AlertCircle, type LucideIcon } from 'lucide-react-native';

import { SpinningLoader } from '../../components/SpinningLoader';
import { themedColor } from '../../theme';
import type { ToolWidgetStatus } from '../toolWidgetUtils';
import { toolWidgetStyles } from './toolWidgetStyles';

// Same muted monochrome palette as the default tool timeline (gray for normal /
// active, red only for errors) — see ToolCallSummary.tsx.
const ICON_MUTED = '#A1A1AA';
const ICON_ERROR = '#FCA5A5';

export function StatusIcon({
  icon: Icon,
  size = 16,
  status,
}: {
  icon: LucideIcon;
  size?: number;
  status: ToolWidgetStatus;
}) {
  const isError = status === 'error';
  const color = themedColor(isError ? ICON_ERROR : ICON_MUTED);

  return (
    <View style={toolWidgetStyles.rowIcon}>
      {status === 'running' ? (
        <SpinningLoader color={color} size={size} />
      ) : isError ? (
        <AlertCircle color={color} size={size} strokeWidth={2.3} />
      ) : (
        <Icon color={color} size={size} strokeWidth={2.3} />
      )}
    </View>
  );
}