import { cx } from '@linaria/core';
import { styled } from '@linaria/react';
import React__default from 'react';
import { Color } from '../../styles/token/color.js';

const _exp = /*#__PURE__*/() => ({
  background
}) => background;
const AvatarWrapper = /*#__PURE__*/styled('span')({
  name: "AvatarWrapper",
  class: "E_4100_0_7_a1b5xrg3",
  propsAsIs: false,
  vars: {
    "a1b5xrg3-0": [_exp()]
  }
});
const Avatar = ({
  username,
  className,
  background = "light-blue",
  "data-testid": dataTestId
}) => {
  return /* @__PURE__ */React__default.createElement(AvatarWrapper, {
    "data-testid": dataTestId,
    background: Color.gradient[background] || background,
    className: cx(className, "user-icon btn-item")
  }, /* @__PURE__ */React__default.createElement("span", {
    className: "user-icon-inner"
  }, username.substring(0, 1)));
};
var Avatar$1 = Avatar;

export { Avatar$1 as default };
