import { useSocialStore } from '@/stores/social.store';

interface OnlineIndicatorProps {
  userId: string;
  size?: number;
  style?: React.CSSProperties;
}

/** Green dot showing online status for a user (based on SSE presence data) */
export default function OnlineIndicator({ userId, size = 10, style }: OnlineIndicatorProps) {
  const isOnline = useSocialStore((s) => s.onlineFriends.some((f) => f.userId === userId));

  if (!isOnline) return null;

  return (
    <span
      style={{
        display: 'inline-block',
        width: size,
        height: size,
        borderRadius: '50%',
        backgroundColor: '#52c41a',
        border: '2px solid #1b2838',
        ...style,
      }}
      title="Online"
    />
  );
}
