import root from 'react-shadow/emotion';
import { type SxProps } from '@mui/material';

import { styled } from '../../Theme';

export interface InlineSvgProps extends React.HTMLAttributes<HTMLSpanElement> {
  svg: string;
  sx?: SxProps;
}

/** inline svg 的方式嵌入 svg, 使用 shadow DOM 避免样式污染 */
function InlineSvg({ svg, ...rest }: InlineSvgProps) {
  return (
    <Root {...rest}>
      <Inner dangerouslySetInnerHTML={{ __html: svg }} />
    </Root>
  );
}

const Root = styled(root.span)`
  display: block;
  width: 100%;
  height: 100%;
`;

const Inner = styled('div')`
  &,
  & > svg {
    height: 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
`;

export default InlineSvg;
