'use client'

import { Library } from 'lucide-react'
import type { KnowledgeUnit } from '@/lib/sdk/advisor/evidence'
import { KnowledgeUnitCard } from './KnowledgeUnitCard'
import { PaneHeader } from './PaneHeader'

/** Sources pane — the answer's evidence as hierarchical Knowledge Units, separate from the prose. */
export function SourcesPane({ sources }: { sources: KnowledgeUnit[] }) {
  return (
    <section>
      <PaneHeader icon={<Library className="h-3.5 w-3.5 text-gray-500" />} title="Quellen" count={sources.length} />
      {sources.length === 0 ? (
        <p className="px-1 text-[11px] text-gray-400">Keine strukturierten Quellen zu dieser Antwort.</p>
      ) : (
        <div className="space-y-1.5">
          {sources.map((s) => (
            <KnowledgeUnitCard key={s.id} unit={s} />
          ))}
        </div>
      )}
    </section>
  )
}