'use client'

import { Hash } from 'lucide-react'
import type { FootnoteUnit } from '@/lib/sdk/advisor/evidence'
import { PaneHeader } from './PaneHeader'

/** Footnotes pane (C-FN) — rendered only when present. */
export function FootnotesPane({ footnotes }: { footnotes: FootnoteUnit[] }) {
  if (footnotes.length === 0) return null
  return (
    <section>
      <PaneHeader icon={<Hash className="h-3.5 w-3.5 text-gray-500" />} title="Fußnoten" count={footnotes.length} />
      <div className="space-y-1">
        {footnotes.map((fn) => (
          <div key={fn.id} className="rounded-md border border-gray-200 bg-white p-2 text-[11px]">
            <span className="font-semibold text-gray-900">{fn.ref}</span>
            <span className="text-gray-400">
              {' · '}
              {fn.source.short}
              {fn.section ? ` / ${fn.section}` : ''}
            </span>
            {fn.text && <p className="mt-0.5 text-gray-600">{fn.text}</p>}
          </div>
        ))}
      </div>
    </section>
  )
}