'use client'

import { HelpCircle } from 'lucide-react'

/** The last question, pinned so it never scrolls out of view while the answer grows. */
export function StickyQuestion({ question }: { question: string }) {
  if (!question) return null
  return (
    <div className="sticky top-0 z-10 border-b border-indigo-100 bg-indigo-50/95 px-4 py-2 backdrop-blur">
      <div className="flex items-start gap-2">
        <HelpCircle className="mt-0.5 h-4 w-4 flex-shrink-0 text-indigo-500" />
        <div className="min-w-0">
          <div className="text-[10px] font-semibold uppercase tracking-wide text-indigo-400">
            Letzte Frage
          </div>
          <div className="text-sm font-medium text-gray-800">{question}</div>
        </div>
      </div>
    </div>
  )
}