import { c as _c } from "react/compiler-runtime";
import * as stylex from "@stylexjs/stylex";
import { memo } from "react";
import { color, radius, size } from "./tokens.stylex";
export default memo(UserAvatar);
const styles = stylex.create({
  avatar: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: radius.circle,
    backgroundColor: color.gray800,
    width: size.px12,
    height: size.px12,
    minWidth: size.px12,
    minHeight: size.px12,
    fontWeight: "bold"
  }
});
function UserAvatar(t0) {
  const $ = _c(4);
  const {
    userName
  } = t0;
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = stylex.props(styles.avatar);
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  const t2 = userName[0];
  const t3 = userName[1];
  let t4;
  if ($[1] !== t2 || $[2] !== t3) {
    t4 = <span {...t1}>{t2}{t3}</span>;
    $[1] = t2;
    $[2] = t3;
    $[3] = t4;
  } else {
    t4 = $[3];
  }
  return t4;
}
//# sourceMappingURL=UserAvatar.jsx.map