import{j as s,i as n}from"./vendor-ui-BUsIib4b.js";import{r as m}from"./vendor-react-C0ZmnAiH.js";import{b as $}from"./index-ccpu5IUx.js";import{u as b}from"./use_user-BKIOew3g.js";import{S as h}from"./use_metric-JQcwAm9V.js";const U=n.div`
	position: relative;
	width: ${o=>o.size}px;
	height: ${o=>o.size}px;
`,f=n.img`
	width: ${o=>o.size}px;
	height: ${o=>o.size}px;
	border-radius: 50%;
`,A=n.div`
	position: absolute;
	top: 0;
	right: 0;
	width: ${o=>o.$size/4}px;
	height: ${o=>o.$size/4}px;
	background-color: ${o=>o.$color};
	border-radius: 50%;
`,z=({size:o=32,username:t,userUID:a,state:c,backgroundColor:u="black"})=>{const{useUserByUsernameQuery:p,useUserByUIDQuery:g}=b(),[r,d]=m.useState(void 0),{data:i,isLoading:x}=p(t),{data:e,isLoading:v}=g(a);m.useEffect(()=>{t&&i?d(i):a&&e&&d(e)},[i,e,t,a]);const l=c?h[c]:void 0;return x||v?null:s.jsxs(U,{size:o,children:[r!=null&&r.avatar_blob_url?s.jsx(f,{src:r.avatar_blob_url,alt:"Avatar",size:o}):s.jsx($,{size:o,name:(r==null?void 0:r.username)||"Anonymous",variant:"beam",colors:["#92A1C6","#146A7C","#F0AB3D","#C271B4","#C20D90"]}),l&&s.jsx(A,{$color:l,$size:o,$backgroundColor:u})]})};export{z as U};