import { Icon } from "@mui/material";
import { useActualColorMode } from "../widgets/dashboard/ThemeSwitcher";

export function AppIcon(p: { src: string; size?: string }): React.ReactElement {
  const { mode } = useActualColorMode();
  return (
    <Icon style={{ display: "inline-flex", width: p.size, height: p.size }}>
      <img
        style={{
          height: "100%",
          flex: 1,
          backgroundColor: mode === "dark" ? "white" : "black",
          mask: `url("${p.src}")`,
        }}
      />
    </Icon>
  );
}