/**
 * StreamingIndicator — 流式加载指示器
 */

import { Box, Typography, CircularProgress } from '@mui/material';
import { Brain, Loader2 } from 'lucide-react';
import { useAgentStore } from '@renderer/stores/agent-store';

export function StreamingIndicator(): React.JSX.Element | null {
  const isStreaming = useAgentStore((s) => s.isStreaming);
  const agentStatus = useAgentStore((s) => s.agentStatus);
  if (!isStreaming) return null;

  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 1.5, animation: 'fadeIn 200ms ease-out' }}>
      <Box sx={{ width: 32, height: 32, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: 'secondary.main', color: 'primary.main' }}>
        <Brain size={16} style={{ animation: 'pulse 2s infinite' }} />
      </Box>
      <Loader2 size={14} style={{ animation: 'spin 1s linear infinite', color: '#818cf8' }} />
      <Typography variant="caption" sx={{ color: 'text.secondary' }}>
        {agentStatus === 'thinking' ? '思考中...' : agentStatus === 'executing' ? '执行中...' : '处理中...'}
      </Typography>
    </Box>
  );
}
