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="font-mono text-[10px] text-muted-strong transition-colors no-underline hover:text-ink"
            >
                [{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 border-t border-line pt-8">
            <h3 className="eyebrow mb-4">References</h3>
            <ol className="list-decimal space-y-2 pl-4 text-[0.94rem] leading-7 text-muted">
                {Array.isArray(items) && items.map((item) => (
                    <li key={item.id} id={`cite-note-${item.id}`}>
                        {item.content}
                        <a href={`#cite-ref-${item.id}`} className="ml-2 transition-colors hover:text-ink">
                            ↩
                        </a>
                    </li>
                ))}
                {!Array.isArray(items) && children}
            </ol>
        </div>
    );
}
