import DOMPurify from 'dompurify';
import { useAsyncEffect } from 'ahooks';
import axios from 'axios';
import { useState } from 'react';
import InlineSvg from './svg-embedder/inline-svg';

function RenderSvg({ src, onLoad = undefined }: { src: string; onLoad?: () => void }) {
  const [svgContent, setSvgContent] = useState('');

  useAsyncEffect(async () => {
    // @note: 注意源站点需要允许跨域
    const response = await axios.get(src);
    const cleanSVG = DOMPurify.sanitize(response.data);
    setSvgContent(cleanSVG);
    onLoad?.();
  }, []);

  return <InlineSvg svg={svgContent} />;
}

export default RenderSvg;
