'use client'

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

/** Footnotes pane (C-FN) — rendered only when present. */
export function FootnotesPane({ footnotes }: { footnotes: Footnote[] }) {
  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, i) => (
          <div key={fn.footnote_id || i} className="rounded-md border border-gray-200 bg-white p-2 text-[11px]">
            <span className="font-semibold text-gray-900">{fn.ref || `Fußnote ${i + 1}`}</span>
            {(fn.document || fn.section) && (
              <span className="text-gray-400">
                {' · '}
                {fn.document}
                {fn.section ? ` / ${fn.section}` : ''}
              </span>
            )}
            {fn.text && <p className="mt-0.5 text-gray-600">{fn.text}</p>}
          </div>
        ))}
      </div>
    </section>
  )
}