import type { AgreementBlock } from './agreementCopy.ts';
import { InlineRuns } from './InlineRuns.tsx';

/**
 * One element per AUTHORED block, verbatim - never a parse of the text. Shared by the first-sign-in
 * gate and the settings page's "read the text you accepted" toggle, extracted here so a second
 * hand-copy of this switch is not how the two renderers drift apart.
 */
export const AgreementBlocks = ({ blocks }: { blocks: AgreementBlock[] }) => (
    <>
        {blocks.map((block, i) => {
            switch (block.type) {
                case 'title':
                    // No size or weight utilities: they outrank the mount's ruled h2 and h3 styles.
                    return <h2 key={i}>{block.text}</h2>;
                case 'heading':
                    return <h3 key={i} className="pt-2"><InlineRuns text={block.text} runs={block.runs} /></h3>;
                case 'list': {
                    const items = block.items.map((item, j) => (
                        // `list-none` with the bullet kept in the canonical string, NOT a CSS marker -
                        // `deriveBody` re-adds ` - ` to reconstitute the accepted text. An ordered list
                        // keeps no such className: its number is drawn by `ak-numbers`, not by a
                        // canonical-string marker, because `deriveBody` already numbers ordered items
                        // itself.
                        <li key={j} className={block.ordered ? undefined : "relative pl-4 before:absolute before:left-0 before:content-['•']"}>
                            <InlineRuns text={item} runs={block.itemRuns?.[j]} />
                        </li>
                    ));
                    return block.ordered
                        // `ak-numbers`, not `list-decimal pl-6`: the mount's `ol` reset is scoped to the root id
                        // and outranks any utility, so only a rule scoped the same way brings the numbers back.
                        ? <ol key={i} className="ak-numbers space-y-1">{items}</ol>
                        : <ul key={i} className="list-none space-y-1">{items}</ul>;
                }
                default:
                    return <p key={i}><InlineRuns text={block.text} runs={block.runs} /></p>;
            }
        })}
    </>
);

export default AgreementBlocks;