import type { ReactNode } from 'react';
import { isSafeAgreementHref, type InlineRun } from './agreementCopy.ts';

/**
 * A block's text with its formatting, built as elements from structure. Nothing here reads the text
 * for syntax: a run is bold because it says so, not because of asterisks in it.
 */
export const InlineRuns = ({ text, runs }: { text: string; runs?: InlineRun[] }) => {
    // Runs that say other words than `text` are not drawn: the text is what was accepted.
    if (!runs?.length || runs.map((run) => run.text).join('') !== text) return <>{text}</>;
    return (
        <>
            {runs.map((run, i) => {
                let node: ReactNode = run.text;
                if (run.italic) node = <em>{node}</em>;
                if (run.bold) node = <strong>{node}</strong>;
                if (run.href && isSafeAgreementHref(run.href)) {
                    // A named rule rather than `underline`: the mount's `a` reset outranks any utility.
                    node = (
                        <a href={run.href} target="_blank" rel="noopener noreferrer" className="ak-agreement-link">
                            {node}
                        </a>
                    );
                }
                return <span key={i}>{node}</span>;
            })}
        </>
    );
};

export default InlineRuns;