import { Account } from "../api/AccountApi";
import { ServerApi } from "../api/ServerApi";
import { useDarkTheme } from "../hooks/context_providers/DarkThemeProvider";
import { toBase64 } from "@jsonjoy.com/base64";

export function AccountIconWidget(p: { account: Account }): React.ReactElement {
  const darkTheme = useDarkTheme();

  return (
    <img
      style={{
        height: "1.5em",
        width: "1.5em",
        backgroundColor: darkTheme.enabled ? "white" : "black",
        mask: `url("data:image/svg+xml;base64,${toBase64(
          new TextEncoder().encode(
            ServerApi.Config.accounts_types.find(
              (t) => t.code === p.account.type
            )!.icon
          )
        )}")`,
      }}
    />
  );
}