export function Citation({ id, index }: { id: string; index: number }) {
    return (
        <sup id={`cite-ref-${id}`} className="ml-0.5">
            <a
                href={`#cite-note-${id}`}
                className="text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors font-mono text-[10px] no-underline"
            >
                [{index}]
            </a>
        </sup>
    );
}

export function Bibliography({ items, children }: { items?: { id: string; content: React.ReactNode }[]; children?: React.ReactNode }) {
    if (!items && !children) return null;

    return (
        <div className="mt-12 pt-8 border-t border-zinc-200 dark:border-zinc-800">
            <h3 className="text-sm font-bold uppercase tracking-wider text-zinc-900 dark:text-zinc-100 mb-4">References</h3>
            <ol className="list-decimal pl-4 space-y-2 text-sm text-zinc-600 dark:text-zinc-400">
                {Array.isArray(items) && items.map((item, i) => (
                    <li key={item.id} id={`cite-note-${item.id}`}>
                        {item.content}
                        <a href={`#cite-ref-${item.id}`} className="ml-2 hover:text-zinc-900 dark:hover:text-zinc-100">
                            ↩
                        </a>
                    </li>
                ))}
                {!Array.isArray(items) && children}
            </ol>
        </div>
    );
}