import clsx from "clsx";
import reactStringReplace from "react-string-replace";

const HIGHLIGHT = /({{.+}})/g;

export default function Title({children, className}: {children: string; className?: string}) {
	return (
		<span className={clsx("text-4xl font-bold max-w-md", className)}>
			{reactStringReplace(children, HIGHLIGHT, (match, i) => (
				<span key={i} className="text-mti-rose-light">
					{match.replaceAll(/[{}]/g, "")}
				</span>
			))}
		</span>
	);
}
