'use client'

import { Markdown } from './Markdown'

/** The answer panel — rendered markdown (clean prose, no inline citations). */
export function AnswerPane({
  answer,
  streaming,
  error,
}: {
  answer: string
  streaming?: boolean
  error?: string
}) {
  if (error) {
    return (
      <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
        {error}
      </div>
    )
  }
  if (!answer && streaming) {
    return (
      <div className="flex space-x-1 px-1 py-2" aria-label="Antwort wird generiert">
        <span className="h-2 w-2 animate-bounce rounded-full bg-gray-400" />
        <span className="h-2 w-2 animate-bounce rounded-full bg-gray-400" style={{ animationDelay: '0.1s' }} />
        <span className="h-2 w-2 animate-bounce rounded-full bg-gray-400" style={{ animationDelay: '0.2s' }} />
      </div>
    )
  }
  return (
    <div className="rounded-lg border border-gray-200 bg-white px-3 py-2">
      <Markdown content={answer} />
      {streaming && <span className="ml-0.5 inline-block h-3 w-1.5 animate-pulse bg-indigo-400 align-middle" />}
    </div>
  )
}