/**
 * Wizard Streaming Message
 * 
 * Displays a scripted message with a typewriter effect.
 * Uses inline styles to avoid WP admin CSS overrides.
 * 
 * @package BoostBot
 */

import { Bot } from 'lucide-react'

interface WizardStreamingMessageProps {
  message: string
  isStreaming: boolean
}

export function WizardStreamingMessage({ message, isStreaming }: WizardStreamingMessageProps) {
  if (!message) return null

  return (
    <div style={{ display: 'flex', gap: '10px', alignItems: 'flex-start' }}>
      <div
        style={{
          flexShrink: 0,
          width: '28px',
          height: '28px',
          borderRadius: '50%',
          background: 'linear-gradient(135deg, #3BC2D0, #2BA8B5)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          boxShadow: '0 1px 2px rgba(0,0,0,0.1)',
        }}
      >
        <Bot style={{ width: '16px', height: '16px', color: '#fff' }} />
      </div>
      <div style={{ flex: 1, fontSize: '14px', color: '#4B5563', lineHeight: 1.6 }}>
        {message}
        {isStreaming && (
          <span
            style={{
              display: 'inline-block',
              width: '2px',
              height: '16px',
              backgroundColor: '#3BC2D0',
              marginInlineStart: '2px',
              verticalAlign: 'middle',
              borderRadius: '9999px',
              animation: 'pulse 1s cubic-bezier(0.4,0,0.6,1) infinite',
            }}
          />
        )}
      </div>
    </div>
  )
}
