import { Fragment } from 'react';
import { Highlight, Strong } from '@/components/site/page-hero';

/**
 * Renders content strings with light inline markup, so translations can
 * keep emphasis without splitting sentences into pieces:
 *
 * - `**text**` → emphasized text
 * - `==text==` → crimson gradient highlight (hero titles)
 */
export default function RichText({ text }: { text: string }) {
    const parts = text.split(/(\*\*.+?\*\*|==.+?==)/g);

    return (
        <>
            {parts.map((part, index) => {
                if (part.startsWith('**') && part.endsWith('**')) {
                    return <Strong key={index}>{part.slice(2, -2)}</Strong>;
                }

                if (part.startsWith('==') && part.endsWith('==')) {
                    return (
                        <Highlight key={index}>{part.slice(2, -2)}</Highlight>
                    );
                }

                return <Fragment key={index}>{part}</Fragment>;
            })}
        </>
    );
}