import cx from "classnames";
import React from "react";

export interface MegaMenuIconProps extends React.SVGAttributes<SVGSVGElement> {
  /** Accessible label for the icon. */
  alt?: string;
  /** Icon name (required). */
  name: string;
  /** Path to the SVG sprite. */
  spritePath?: string;
  /** Additional CSS classes */
  className?: string;
}

const CLASS_ROOT = "megamenu-icon";

const MegamenuIcon: React.FC<MegaMenuIconProps> = ({
  className,
  alt,
  name,
  spritePath = "/sprite.svg",
  ...other
}) => {
  const classes = cx(CLASS_ROOT, className);

  return (
    <svg
      className={classes}
      aria-hidden={alt !== undefined ? undefined : "true"}
      role={alt !== undefined ? "img" : undefined}
      {...other}
    >
      {alt !== undefined && alt.length > 0 && <title>{alt}</title>}
      {/* Light theme version (default) */}
      <use
        className={`${CLASS_ROOT}__use ${CLASS_ROOT}__use--light`}
        xlinkHref={`${spritePath}#${name}`}
      />
      {/* Dark theme version */}
      <use
        className={`${CLASS_ROOT}__use ${CLASS_ROOT}__use--dark`}
        xlinkHref={`${spritePath}#${name}`}
      />
    </svg>
  );
};

export { MegamenuIcon };