cinny/src/app/components/presence/PresenceRingAvatar.tsx

import React, { CSSProperties } from 'react';
import { color } from 'folds';
import { Presence, useUserPresence } from '../../hooks/useUserPresence';

function presenceRingColor(presence: Presence | undefined, status?: string): string | null {
  if (!presence || presence === Presence.Offline) return null;
  if (presence === Presence.Unavailable) {
    return status === 'dnd' ? color.Critical.Main : color.Warning.Main;
  }
  return color.Success.Main;
}

type PresenceRingAvatarProps = {
  userId: string;
  children: React.ReactElement<{ style?: CSSProperties }>;
};

export function PresenceRingAvatar({ userId, children }: PresenceRingAvatarProps) {
  const presence = useUserPresence(userId);
  const ringColor = presenceRingColor(presence?.presence, presence?.status);

  if (!ringColor) return <>{children}</>;

  // Apply outline directly to the child so it follows the child's actual border-radius.
  // outline follows border-radius in Chrome 94+, Firefox 88+, Safari 16.4+.
  // This avoids the mismatch of a circular wrapper around a rounded-square avatar.
  return React.cloneElement(children, {
    style: {
      ...children.props.style,
      outline: `2px solid ${ringColor}`,
      outlineOffset: '2px',
    },
  });
}