import React from "react";
import { cx } from "../../utils/cx";
import type { IconProps } from "./types";

const MaterialIcon: React.FC<IconProps> = ({
  name,
  fill = 0,
  opticalSize = "48dp",
  weight = "200",
  emphasis = 145,
  size = 24,
  color = "currentColor",
  style = {},
  className,
  onClick,
  dataTestId,
}) => {
  const fontVariationSettings = `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${emphasis}, 'opsz' ${opticalSize.substring(0, 2)}`;

  const combinedStyle: React.CSSProperties = {
    fontVariationSettings,
    fontSize: `${size}px`,
    fontFamily: "'Material Symbols Rounded'",
    color: color || "currentColor",
    ...style,
  };

  return (
    <span
      style={combinedStyle}
      className={cx(
        "material-symbols-rounded inline-block max-w-[52px] overflow-hidden",
        className
      )}
      onClick={onClick}
      data-testid={dataTestId}
      aria-hidden={"true"}
    >
      {name}
    </span>
  );
};

export { MaterialIcon };

MaterialIcon.displayName = "MaterialIcon";

export type { IconProps, IconName, Size } from "./types";