import "./BodyText.scss";

/**
 * Plain paragraph of body-sized text ("bodyText" element type) - an intro or
 * description paragraph below a headline. Distinct from `disclaimer` (small,
 * absolutely bottom-pinned legal print) and from `headline` (display-sized).
 *
 * @param {Object} props
 * @param {string} props.text - Paragraph text. Supports `<mark>...</mark>` highlight spans, but only when `level` is "1".
 * @param {string} [props.level] - Size variant; "1" renders the larger, mark-aware boxed style, anything else the plain `body-text--{level}` paragraph.
 */
export const BodyText = ({ text, level }) => {
  const parts = text.split(/(<mark>.*?<\/mark>)/g);

  return (
    <div className="text-box">
      {level === "1" ? (
        <div className="body-text__box">
          <p className={`body-text--1`}>
            {parts.map((part, index) => {
              if (part.startsWith("<mark>") && part.endsWith("</mark>")) {
                // Entfernt die Tags für die eigentliche Ausgabe
                const cleanText = part.replace(/<\/?mark>/g, "");
                return (
                  <mark key={index} className="text-highlight">
                    {cleanText}
                  </mark>
                );
              }
              return <span key={index}>{part}</span>;
            })}
          </p>
        </div>
      ) : (
        <p className={`body-text body-text--${level}`}>{text}</p>
      )}
    </div>
  );
};