import type { RefAttributes } from "react";
import { Children } from "react";
import classNames from "classnames/dedupe";
import type { DOMProps } from "../../types/dom";

export interface SVGProps extends DOMProps, RefAttributes<SVGSVGElement> {
  children: React.ReactElement<React.SVGProps<SVGSVGElement>>;
  className?: string;
  style?: React.CSSProperties;
  role?: React.AriaRole;
  "aria-label"?: string;
  "aria-hidden"?: boolean | "true" | "false";
  "aria-labelledby"?: string;
}
const SVG = ({ ref, ...props }: SVGProps) => {
  const { children, className, ...otherProps } = props;

  const classes = classNames("mobius", "mobius-svg", className);
  const svgNode = Children.only(children);
  // Remove originalType and mdxType props
  const { children: svgChildren, viewBox, xmlns } = svgNode.props;

  return (
    <svg
      viewBox={viewBox}
      xmlns={xmlns}
      ref={ref}
      {...otherProps}
      className={classes}
    >
      {svgChildren}
    </svg>
  );
};

SVG.displayName = "SVG";
export { SVG };
