import { useMemo } from 'react';

import DOMPurify from 'dompurify';

interface Props {
  className?: string;
  html: string;
}

// Render server-provided HTML safely. DOMPurify strips any scripts/handlers
// before it reaches the DOM — the equivalent of the legacy ngSanitize used by
// ng-bind-html. Sanitized output is memoized so we don't re-parse every render.
export const SanitizedHtml = ({ className, html }: Props) => {
  const clean = useMemo(() => DOMPurify.sanitize(html), [html]);
  return <div className={className} dangerouslySetInnerHTML={{ __html: clean }} />;
};
