import type { ChatMessageType } from '../../types'

interface ChatMessageProps {
  message: ChatMessageType
}

export function ChatMessage({ message }: ChatMessageProps) {
  const isUser = message.role === 'user'

  return (
    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-3`}>
      {!isUser && (
        <div className="shrink-0 w-6 h-6 rounded-full bg-accent/20 border border-accent/30 flex items-center justify-center mr-2 mt-0.5">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <circle cx="6" cy="6" r="3" fill="#22d3ee" />
            <circle cx="6" cy="6" r="5.5" stroke="#22d3ee" strokeOpacity="0.4" />
          </svg>
        </div>
      )}

      <div
        className={`max-w-[80%] px-3 py-2 rounded-lg text-sm leading-relaxed font-body ${
          isUser
            ? 'bg-accent/15 text-zinc-100 border border-accent/20'
            : 'bg-zinc-800 text-zinc-200 border border-zinc-700'
        }`}
      >
        {message.content}
        {message.isStreaming && (
          <span className="inline-block w-1 h-3.5 bg-accent ml-0.5 align-text-bottom animate-pulse" />
        )}
      </div>
    </div>
  )
}