import type { FC, ReactElement } from "react";
import type { IComponentBaseProps } from "#package/types";
import type { IHTMLComment } from "./config/types";
import { getSanitizedHTML } from "../../utils/getSanitizedHTML";


/**
 * Комментарий, выводимый в HTML-разметку
 * @returns {ReactElement}
 */
const HTMLComment: FC<IHTMLComment & IComponentBaseProps> = ({
  extraAttrs = {},
  text = "",
}): ReactElement => {

  const comment = `<!-- ${text} -->`;

  const callback = (template: HTMLTemplateElement) => {
    if (template) {
      template.setAttribute("data-comment", text);
      template.innerHTML = "";
    }
  };

  return (
    <template data-comment={""} ref={callback} dangerouslySetInnerHTML={{ __html: getSanitizedHTML(comment) }} {...extraAttrs} />
  );

};

export type { IHTMLComment };
export { HTMLComment };