Avatar Ring

const RINGS = {
  online: "ring-emerald-500",
  away: "ring-amber-500",
  offline: "ring-zinc-400",
} as const;

export function AvatarRing({
  initials, color, status = "online",
}: { initials: string; color: string; status?: keyof typeof RINGS }) {
  return (
    <div className={\`relative rounded-full ring-2 ring-offset-2 ring-offset-background \${RINGS[status]}\`}>
      <div className="grid size-12 place-items-center rounded-full text-sm font-medium text-white" style={{ background: color }}>
        {initials}
      </div>
      {status === "online" && (
        <span className="absolute -bottom-0.5 -right-0.5 size-3 rounded-full border-2 border-background bg-emerald-500" />
      )}
    </div>
  );
}